使用Jquery创建fancybox库的链接

我试图在一个页面上有多个fancybox-3图库。然而，我不希望他们是可见的，直到点击链接调用正确的画廊。我已将图像分组到相关的图库中。但是，单击链接也会显示链接。有人能告诉我如何使用jQuery调用fancybox-3库吗。多谢各位

<h2>fancyBox v3.2 - gallery links</h2>

<h4><a class="fancy-link" data-fancybox="bark">Bark gallery</a></h4>

<p class="imglist hidden">
  <a href="https://source.unsplash.com/ndjyaOp0fOc/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
  </a>

  <a href="https://source.unsplash.com/A-fubu9QJxE/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/A-fubu9QJxE/240x160" />
  </a>

  <a href="https://source.unsplash.com/rkkr6-2I4sg/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/rkkr6-2I4sg/240x160" />
  </a>

  <a href="https://source.unsplash.com/mr_Tg4SI66A/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/mr_Tg4SI66A/240x160" />
  </a>

  <a href="https://source.unsplash.com/YEsedBccUEA/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/YEsedBccUEA/240x160" />
  </a>

  <a href="https://source.unsplash.com/Hw62tzAkXXE/1500x1000" data-fancybox="bark">
      <img src="https://source.unsplash.com/Hw62tzAkXXE/240x160" />
  </a>
</p>

<h4><a class="fancy-link" data-fancybox="landscape">Landscape gallery</a></h4>

<p class="imglist hidden">
  <a href="https://source.unsplash.com/Lzx4J_Pb3sk/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/Lzx4J_Pb3sk/240x160" />
  </a>

  <a href="https://source.unsplash.com/cZVthlrnlnQ/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/cZVthlrnlnQ/240x160" />
  </a>

  <a href="https://source.unsplash.com/vddccTqwal8/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/vddccTqwal8/240x160" />
  </a>

  <a href="https://source.unsplash.com/Sj5efgWguDs/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/Sj5efgWguDs/240x160" />
  </a>

  <a href="https://source.unsplash.com/Y7y7fe8hrh0/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/Y7y7fe8hrh0/240x160" />
  </a>

  <a href="https://source.unsplash.com/sYegwYtIqJg/1500x1000" data-fancybox="landscape">
      <img src="https://source.unsplash.com/sYegwYtIqJg/240x160" />
  </a>
</p>

fancyBox v3.2-图库链接

代码笔在这里：

---

多亏了@janis的帮助，终于有办法了。代码如下：

$("[data-fancybox]").fancybox({
        // Options will go here
    });
    $('.fancy-link').click(function () {
        event.preventDefault();
        $('a[data-fancybox="' + $(this).attr("data-trigger") + '"]').first().trigger('click');
    });

代码笔

---

此外，我希望这可以成为一个单击侦听器/函数，这样我的团队就不必编辑javascript即可工作。如果我能让它基于类或数据属性工作，那就太好了！我想您正在寻找一个从v3.3开始就可以使用的功能。看看这个演示的最后一个例子-@janis，差不多就是这样！数据触发器是我需要的。无论如何，在这段时间内要做这件事吗？好吧，这本书预计在本周发行，但我遇到了一个问题：/