使用 Jquery 创建指向 fancybox 画廊的链接答案

【问题标题】：Create links to fancybox galleries using Jquery使用 Jquery 创建指向 fancybox 画廊的链接
【发布时间】：2018-03-09 09:34:09
【问题描述】：

我试图在一个页面上拥有多个 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>

Codepen 在这里： https://codepen.io/anon/pen/OvJrBg

【问题讨论】：

另外，我希望这可能是一个点击监听器/功能，这样我的团队就不必编辑 javascript 来工作。如果我可以让它基于类或数据属性工作，那就太好了！
我猜您正在寻找从 v3.3 开始可用的功能。请参阅此演示的最后一个示例 - codepen.io/fancyapps/pen/VyLOJX?editors=1000
@janis 差不多了！数据触发器是我需要的。无论如何要在此期间这样做？
嗯，预计本周会发布，但我在一个问题上苦苦挣扎：/

标签： jquery fancybox-3

【解决方案1】：

多亏了@janis 的帮助，终于有了一些工作。代码如下：

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

codepen https://codepen.io/anon/pen/pLoXZR

【讨论】：