javascript - 如何在没有标签的情况下使用 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">