Лайтбокс2 не запускается

Итак, то, что, как я думал, займет у меня несколько минут, теперь заняло более часа моего времени, и я просто полностью озадачен.

Я скачал lightbox2 и следовал инструкциям; встраивание их CSS и JS в заголовок моего index.html

<link href="lightbox/lightbox.css" rel="stylesheet">
<script src="lightbox/lightbox-plus-jquery.js"></script>

Я тестирую его только на локальном хосте, если это имеет значение. Пути установлены правильно на 100%, как и пути к 4 изображениям, которые требуются CSS.

Теперь в моем теле я использую href с атрибутом data-lightbox, как это

<a class="example-image-link" href="gallery/i1.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i1.jpg" alt="desc">
</a>
<a class="example-image-link" href="gallery/i2.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i2.jpg" alt="desc">
</a>

На странице больше ничего нет, поэтому результат выглядит так: result

Проблема в том, что когда я нажимаю на одно из изображений, вместо всплывающего лайтбокса изображение просто открывается в полноэкранной вкладке. Похоже, что лайтбокс вообще не работает, и он просто следует за a href к изображению. Я даже попробовал JSFiddle и загрузил те же CSS и JS в качестве внешних ресурсов, и он делает то же самое. Убедитесь сами -> JSFIDDLE

Я открыт для любых идей.. Действительно не понимаю, чего мне не хватает.


javascript html jquery lightbox2
person Cream Whipped Airplane    schedule 14.10.2015    source источник
comment
У меня работает нормально Codepen codepen.io/noobskie/pen/OyxyrP Может быть, вы загружаете свои скрипты?   -  person NooBskie    schedule 14.10.2015
comment
и с теми же источниками, что и я, верно? Как это возможно?   -  person Cream Whipped Airplane    schedule 14.10.2015
comment
Да, использование тех же, что вы использовали в jsfiddle @1cgonza, что-то да   -  person NooBskie    schedule 14.10.2015

Ответы (1)


arrow_upward
10
arrow_downward

Вы должны переместить бит <script src="lightbox/lightbox-plus-jquery.js"></script> в конец вашего тега body в HTML вместо head. Проблема в том, что если скрипт находится в голове, он запустится до того, как изображения будут готовы для анализа библиотекой.

person 1cgonza    schedule 14.10.2015
comment
Я только что понял это сам ... Клянусь, я прочитал инструкции 5 раз и только в 6-й раз заметил, что внизу страницы перед закрывающим тегом ‹/body› написано «Включите Javascript». - person Cream Whipped Airplane; 14.10.2015
comment
Идеальное решение. Это единственное, что я нашел, которое сработало. - person dspacejs; 10.12.2015