fancybox - 使用带或不带缩略图的 Fancybox 3 图片库？

Question

我有关于 Fancybox 3 的问题。我的网页有很多(10-15)个图片库，每个图片库大约有 50 张图片。每个画廊在主页上都有一个图片链接。
什么fancybox使用更好/更有效？:

不带缩略图使用 -> 缩略图网格由大尺寸图像生成 -> 效果:当打开一个图库时，所有大图片都被加载。

<p>
    <a href="big.jpg" data-fancybox="images">      
    <img src="small_thumbnail.jpg" />
    </a>
</p>

<div style="display: none;">
    <a href="big_1.jpg" data-fancybox="images"></a>
    <a href="big_2.jpg" data-fancybox="images"></a>
</div>

与缩略图一起使用 -> 缩略图网格是从缩略图小尺寸图像生成的 -> 效果:打开主页时所有缩略图都被加载，而无需打开任何画廊。

<p>
    <a href="big.jpg" data-fancybox="images">
    <img src="small_thumbnail.jpg" />
    </a>
</p>

<div style="display: none;">
    <a href="big_1.jpg" data-fancybox="images"> <img src="small_1_thumbnail.jpg"> </a>
    <a href="big_2.jpg" data-fancybox="images"> <img src="small_2_thumbnail.jpg"></a>
</div>

Answer 1

您还有另一个选择 - 使用 data-thumb属性来存储自定义缩略图图像。例子:

  <a href="big-image.jpg" data-fancybox="images"
     data-thumb="small-image.jpg"></a>

看到这个演示 - http://codepen.io/fancyapps/pen/yMxzvE?editors=1010仅供引用，这可以是任何元素，不一定是 <a> .

如果您不想为每个画廊项目创建元素，但您愿意编写一点 JS，那么另一种选择是将画廊项目存储在数组中并使用 instance.addContent()内的方法 onInit回调以填充当前画廊，请参阅此演示 - https://codepen.io/anon/pen/GbradR?editors=1010或更一般的 - https://codepen.io/anon/pen/Gbraep?editors=1010