jQuery Lightbox2 不工作
jQuery Lightbox2 not working
我不知道为什么 LightBox 不工作。当我单击图像时,它会转到页面的 link,而不是让 "lightbox" 淡入显示图像。我 console.logged 并且没有收到任何错误消息。
P画廊|查看投资组合
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="dist/js/lightbox.js"></script>
</head>
<section>
<div class="container">
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li class="design" ><a href="img/web1.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web1.jpg"></a></li>
<li class="programming" ><a href="img/web2.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web2.jpg"></a></li>
<li class="cms" ><a href="img/web3.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web3.jpg"></a></li>
<li class="cms" ><a href="img/web4.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web4.jpg"></a></li>
<li class="design cms programming" ><a href="img/web5.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web5.jpg"></a></li>
<li class="design cms programming" ><a href="img/web6.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web6.jpg"></a></li>
</ul>
</div>
</section>
在 body 标签末尾加载灯箱 javascript 文件。为我工作。显然灯箱需要 DOM 准备解析 images/links.
您可以在页面加载时初始化灯箱:
$(document).ready(function(){
lightbox.init();
});
此问题发生在 jquery 及其正确版本的依赖项上。
在我的例子中,我在正文底部的 jquery 和其他 js 文件之前加载了 lightbox-plus-jquery.min.js。就这样工作正常。
我不知道为什么 LightBox 不工作。当我单击图像时,它会转到页面的 link,而不是让 "lightbox" 淡入显示图像。我 console.logged 并且没有收到任何错误消息。
P画廊|查看投资组合
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="dist/js/lightbox.js"></script>
</head>
<section>
<div class="container">
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li class="design" ><a href="img/web1.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web1.jpg"></a></li>
<li class="programming" ><a href="img/web2.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web2.jpg"></a></li>
<li class="cms" ><a href="img/web3.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web3.jpg"></a></li>
<li class="cms" ><a href="img/web4.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web4.jpg"></a></li>
<li class="design cms programming" ><a href="img/web5.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web5.jpg"></a></li>
<li class="design cms programming" ><a href="img/web6.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web6.jpg"></a></li>
</ul>
</div>
</section>
在 body 标签末尾加载灯箱 javascript 文件。为我工作。显然灯箱需要 DOM 准备解析 images/links.
您可以在页面加载时初始化灯箱:
$(document).ready(function(){
lightbox.init();
});
此问题发生在 jquery 及其正确版本的依赖项上。
在我的例子中,我在正文底部的 jquery 和其他 js 文件之前加载了 lightbox-plus-jquery.min.js。就这样工作正常。