带有js的多个画廊

Question

我在使用某些灯箱画廊时遇到问题。我必须在一个页面中制作多个画廊，但在每个缩略图中，它都会有来自另一个 div 的多个图像。我尝试了一些 Jquery 灯箱，但它没有这个功能。（花式、羽毛等）

a href="#gallery1"

a href="#gallery2"

...

div id="gallery1"

multiple images
multiple images

div id="gallery2"

multiple images
multiple images

我唯一想到的 "solution" 是制作一些带有显示 none 链接到其他图像的缩略图，但它有 200 多张图像，我认为是 "bugged"解决方案... 有什么解决办法吗？或者任何特定的 Jquery 都可以做到吗？

谢谢！

Answer 1

好吧，不管你有 2 张还是 200 张图像，你仍然需要在某个地方存储数据。可能的解决方案（使用 fancyBox3）：

1) 为所有图像创建 links，但只使每个画廊的第一个图像可见。像这样：

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

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

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

带有js的多个画廊

Multiple gallery with js

html

javascript

css

jquery

lightbox