Question

我正在尝试使用Lightbox实现图片库。使用该示例，一切正常。由于我正在使用Bootstrap并已链接到JQuery，因此我想使用ID Text 0 REAL ESTATE LEASE THIS INDUSTRIAL REAL ESTAT... 5 Lease AureementMade and signed on the \ of Aug... 6 FIRST AMENDMENT OF LEASEDATE: August 31, 2001L... 8 Jack ... 9 ABC SALES Meeting 97... 14 FIRST AMENDMENT OF LEASETHIS FIRST AMENDMENT O... 17 Deep ML LEASE SERVI... 22 F 15 083 EX ... 26 LEASE AGREEMENT—GROSS LEASEBASIC LEASE PROVISI... 28 17. Medical VERIFICATION... 31 PLL 3... 32 SUBLEASETHIS SUBLEASE this “Sublease” made as ... 34 Lease Agreement May 10, 20... 35 13057968.3 1 Initials: _____ _____ SECOND ... 42 Jack Dowson Buy Real MI... 46 Deep – Machine Learning LEASE B...而不是lightbox.js。但是，这破坏了功能，所有图像都像常规链接一样全屏打开。

在官方网站上我找不到任何信息，也没有提供其他示例代码。所以我希望这里有人可以帮助我修复它。

这是基于示例的最小html：

lightroom-plus-jquery.js

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时，灯箱不起作用

2 个答案: