我们正在使用fancybox 3创建一种供网站访问者点击图片并以类似灯箱格式显示的方式。我们已经尝试了以下方法,并且可以使其仅与<a>
一起使用,但是我们希望其在没有<a>
的情况下可以使用。
我们如何在不使用<a>
标签的情况下使化装箱工作?
(function($) {
$('.fancybox').fancybox({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet"/>
<div class="fancybox">
<figure>
<a href="myurl/img1.png" data-fancybox="images">
<img src="myurl/img1.png" alt="thumbnail">
</a>
<figure>
<figure>
<a href="myurl/img2.png" data-fancybox="images">
<img src="myurl/img2.png" alt="thumbnail">
</a>
<figure>
<figure>
<a href="myurl/img3.png" data-fancybox="images">
<img src="myurl/img3.png" alt="thumbnail">
</a>
<figure>
<figure>
<a href="myurl/img4.png" data-fancybox="images">
<img src="myurl/img4.png" alt="thumbnail">
</a>
<figure>
</div>
是的,您可以像这样简单地使用
$(function() {
$('.fancybox').fancybox({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet"/>
<img src="myurl/img1.png" class="fancybox" data-fancybox="images" data-src="myurl/img1.png" alt="thumbnail">