Как использовать fancybox 3 без тегов?

Question

Мы используем fancybox 3 , чтобы посетители сайта могли щелкнуть изображение и увидеть его в формате лайтбокса. Мы попробовали следующее и можем заставить его работать только с <a>, но мы хотим, чтобы он работал без <a>.

Как заставить fancybox работать без использования тегов <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>

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">...