我有关于 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>
最佳答案
您还有另一个选择 - 使用 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
关于fancybox - 使用带或不带缩略图的 Fancybox 3 图片库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43048495/