Question

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

Answer 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

使用Jquery创建指向fancybox库的链接

1 个答案: