Я пытаюсь реализовать галерею изображений с помощью Lightbox. На примере все работает нормально. Поскольку я использую Bootstrap и уже связываюсь с JQuery, я бы хотел использовать lightbox.js
вместо lightroom-plus-jquery.js
. Это, однако, нарушает функциональность, и все изображения открываются в полноэкранном режиме, как обычные ссылки.
На официальном сайте я не смог найти никакой информации, и никакого другого примера кода не предоставлено. Поэтому я надеюсь, что кто-то здесь может помочь мне исправить это.
Это минимальный html, основанный на примере:
<html>
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<section>
<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>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
lightbox.js
- person Rory McCrossan   schedule 03.07.2019