Question

我遇到了一些灯箱画廊的问题。我必须在一个页面中创建多个画廊，但在每个缩略图中它将具有来自另一个div的多个图像。我尝试了一些Jquery灯箱，但它没有这个功能。（花式，羽毛等）

a href =“＃gallery1”

a href =“＃gallery2”

...

div id =“gallery1”

multiple images
multiple images

div id =“gallery2”

multiple images
multiple images

我想到的唯一“解决方案”是将一些缩略图与显示无链接到其他图像，但它超过200个图像，我认为是一个“窃听”解决方案...... 那有什么解决方案吗？或者任何具体的Jquery都能做到吗？

谢谢！

Answer 1

嗯，如果您有2或200张图片并不重要，您仍然需要在某处存储数据。可能的解决方案（使用fancyBox3）：

1）为所有图片创建链接，但仅为每个图库显示第一个图像。像这样：

<p>
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-preview">
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
    </a>
</p>

<div style="display: none;">

  <a href="https://farm1.staticflickr.com/582/32752534825_4b35b2df81_o_d.jpg" data-fancybox="images-preview"
     data-thumb="https://farm1.staticflickr.com/582/32752534825_c25321a594_m_d.jpg"></a>

  <a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-preview"
     data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>

</div>

如您所见，您不需要为每个链接创建缩略图，您可以使用data-thumb属性。请参阅此处的最后一个示例 - https://codepen.io/fancyapps/pen/mqEMGX?editors=1000

2）为预览图像创建自定义点击处理程序，以编程方式打开图库，例如使用$.fancybox.open( [array of images], { your options });。您可以选择将数据存储在某个变量中，或使用ajax来检索列表。

多个画廊与js

1 个答案: