包含 lightbox.js 时灯箱不工作

Question

我正在尝试使用 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>

Answer 1

试试这个代码：

   <html>
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.0/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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.0/js/lightbox.js"></script>
</body>
</html>

谢谢

Answer 2

jquery-3.3.1.slim.min.js 有问题，请使用 jquery.min.js。

示例在这里：https://codepen.io/mrdvpatel/pen/BgVpZQ

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
  font-family: 'Montserrat', sans-serif;
}
.example-image-link img {
    width: 24%;
    height: 200px;
    object-fit: cover;
}

<html>
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.0/css/lightbox.css">
</head>
<body>
<section class="images">
 <a class="example-image-link" href="https://dummyimage.com/600x400/000/fff" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="https://dummyimage.com/600x400/000/fff" alt=""/></a>
 <a class="example-image-link" href="https://dummyimage.com/600x400/ff0000/fff" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="https://dummyimage.com/600x400/ff0000/fff" alt="" /></a>
 <a class="example-image-link" href="https://dummyimage.com/400x600/000/fff" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="https://dummyimage.com/400x600/000/fff" alt="" /></a>
 <a class="example-image-link" href="https://dummyimage.com/400x600/ff0000/fff" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="https://dummyimage.com/400x600/ff0000/fff" alt="" /></a>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.0/js/lightbox.js"></script>
</body>
</html>

包含 lightbox.js 时灯箱不工作

Lightbox not working when including lightbox.js

html

javascript

jquery

lightbox

lightbox2