我不知道为什么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>
答案 0 :(得分:12)
将lightbox javascript文件加载到body标记的末尾。为我工作。显然,灯箱需要DOM准备解析图像/链接。
答案 1 :(得分:2)
您可以在页面加载时启动灯箱:
{{1}}
答案 2 :(得分:0)
此问题是由于jquery的依赖及其正确版本引起的。
在我的情况下,我在主体底部的jquery和其他js文件之前加载lightbox-plus-jquery.min.js。 jsut工作正常。