Problem z Lightbox'em

pytanie zadane 10 października 2015 w JavaScript przez Paweł123 Nałogowiec (33,500 p.)

Cześć, mam problem. Od ponad 2h godzin męczę się z Lightbox'em i chciałbym w końcu ten problem rozwiązać :)

Mógłby ktoś mi wytłumaczyć jak wrzucić zdjęcia do kodu, aby wszystko działało jak należy. Oglądałem już poradniki na YT, ale nadal mam problem.

Z góry dzięki za pomoc :D

2 odpowiedzi

odpowiedź 10 października 2015 przez furas Maniak (53,800 p.)

Jeśli najróżniejsze poradniki nic nie dały to czy kolejny poradnik tu napisany coś zmieni ? Równie dobrze możemy odesłać Cię do kolejnych poradników zamiast trudzić się w tworzeniu kolejnego.

Lepiej pokaż kod jaki stworzyłeś aby można było szukać błędu. Inaczej zrobimy dla Ciebie kolejny poradnik a ty przy jego wykonywaniu znowu popełnisz ten błąd i na nic to wszystko.

Możesz kod wrzucić na https://jsfiddle.net/ aby można było na nim wykonywać zmiany.

ps. podczas tworzenia przydatna bywa konsola wbudowana przeglądarki Firefox czy Chrome bo pozwala sprawdzać czy kod JavaScript wykonuje się poprawnie.

komentarz 10 października 2015 przez Paweł123 Nałogowiec (33,500 p.)

Ok wysyłam kod :)

<!DOCTYPE html>
<html>

<head>
    
    <link rel="stylesheet" href="tlo.css" tpye="text/css"/>

    
</head>

<body>
    <a href="arpita_patra_2465947k.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
    
    
    
</body>
</html>

body:after {
  content: url(arpita_patra_2465947k.jpg) ;
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

komentarz 10 października 2015 przez furas Maniak (53,800 p.)

Trzeba było wrzucić na jsFiddle i podesłać link bo wtedy można na tym eksperymetować.

Nigdzie nie widzę abyś wczytywał bibliotekę Lightbox w JavaScript

komentarz 10 października 2015 przez Paweł123 Nałogowiec (33,500 p.)

Ok, już wrzucam do jsFiddle tutaj jest link https://jsfiddle.net/2o4khuwo/

komentarz 10 października 2015 przez furas Maniak (53,800 p.)

Jeśli próbujesz skorzystać z http://lokeshdhakar.com/projects/lightbox2/ to widzę podstawowy błąd - nie wczytujesz jQuery i lightbox.js

komentarz 11 października 2015 przez Paweł123 Nałogowiec (33,500 p.)

A jak mam ją wczytać?

komentarz 11 października 2015 przez furas Maniak (53,800 p.)

Taka informacja powinna być w każdym tutorialu a na pewno jest na stronie LIghtbox2

odpowiedź 11 października 2015 przez furas Maniak (53,800 p.)
edycja 11 października 2015 przez furas

W pełni działający przykład https://jsfiddle.net/dpkemaav/

CSS i JS wczytuje z zewnętrznych serwerów aby nie trzeba było tu nic dołączać.

Wstawiłem też jakieś zewnętrzne zdjęcie kotka aby było coś widać

Na końcu wczytywany jest plik zawierający połączenie biblioteki jQuery i Lightbox2.

Nie blokuje to wczytywania innych elementów strony a co może ważniejsze Lightbox zaczyna działanie czyli poszukiwanie zdjęć na stronie gdy już cały kod HTML jest wczytany więc ma w czym szukać.