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

如何在没有标签的情况下使用 fancybox 3？

How to use fancybox 3 without a tags?

javascript

jquery

html

image

fancybox