4

我对 Fancybox 3 有疑问。我有很多（10-15）个图片库的网页，每个图片库大约有 50 张图片。每个画廊在主页上都有一个图片链接。什么花式盒子使用更好/更有效？：

  1. 不使用缩略图 -> 缩略图网格是从大尺寸图像生成的 -> 效果：打开一个画廊时会加载所有大图片。

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

  2. 与缩略图一起使用 -> 缩略图网格是从缩略图小尺寸图像生成的 -> 效果：打开主页时，所有缩略图都会在没有任何画廊打开的情况下加载。

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

1 回答 1

7

您还有另一个选择 - 使用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

于 2017-03-27T17:02:31.693 回答