如何使用不带标签的fancybox 3？

Question

我们正在使用fancybox 3来创建一种方式，让网站访问者点击图像并看到它以类似灯箱的格式显示。 我们已经尝试了以下方法，并且可以使其仅与<a>一起工作，但我们希望它在没有<a>的情况下工作。

我们如何在不使用<a>标签的情况下让 fancybox 工作？

 (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>

Answer 1

是的，你可以像这样简单地使用

 $(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">

Answer 2

您可以使用任何元素，并且可以使用data-src属性来指定源，例如，替换这个

<figure> <a href="myurl/img1.png" data-fancybox="images">...

有了这个

<figure data-src="myurl/img1.png" data-fancybox="images">...