Галерея изображений lightbox2 вообще не работает - PullRequest
Новая
       57

Галерея изображений lightbox2 вообще не работает

0 голосов
/ 05 июля 2019

Я следовал этому руководству Локеша Дакара, как создать галерею изображений для слайд-шоу: https://www.lokeshdhakar.com/projects/lightbox2/#options и он все еще не работает для меня, и вместо рабочей галереи он просто открывает изображения, как основная ссылка. Я не могу найти что-либо полезное на его странице, ни темы устранения неполадок stackoverflow, потому что я читал некоторые решения от других людей, но ни один не работал для меня. Любые советы, пожалуйста?

Спасибо за любую помощь заранее. 

<!DOCTYPE html>
<html>
<head style="background-color:powderblue;">
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/lightbox_custom.css">
</head>

<body>
<div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/lightbox.js"></script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 05 июля 2019

Хорошо, спасибо за вашу помощь. После еще большего устранения неполадок я наконец нашел свою ошибку. Ближе к концу у меня было: <script src="/js/lightbox.js"></script> вместо <script src="js/lightbox.js"></script>

Эта дополнительная косая черта ( "/" ) перед js / lightbox.js создала все проблемы, и я не знал, что не могу написать ее там из-за моей неопытности. Теперь это выглядит решенным.

0 голосов
/ 05 июля 2019

Используя ссылки на lightbox CSS/JS файлы из lightbox URL, который вы опубликовали (https://www.lokeshdhakar.com/projects/lightbox2/), ваш опубликованный код работает. Как выглядит ваш код lightbox_custom.css? Вы используете этот файл? перезаписать файл lightbox.css? Вы изменили код lightbox.js? 

<!DOCTYPE html>
<html>

<head style="background-color:powderblue;">
  <title>Title</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>

<body>
  <div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://www.lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
</body>

</html>
...