FancyBox图库集成 [英] FancyBox gallery integration

问题描述

我对FancyBox的集成有疑问. 我将创建一个包含10张图片但只有一个缩略图的画廊. 例如: http://fancyapps.com/fancybox/demo/ 第一个演示显示了四个图像:森林，海洋，日落和埃菲尔铁塔. 我是否可以包含一个缩略图，例如埃菲尔铁塔的缩略图，单击该缩略图将在灯箱中显示埃菲尔铁塔的图像，还可以显示森林，海洋和日落的图像. 我尝试了很多事情，但没有任何正常工作. 如果您有任何想法... 非常感谢.

I have a question regarding the integration of FancyBox. I would create a gallery with 10 pictures but only one thumbnail. For example: http://fancyapps.com/fancybox/demo/ The first demonstration shows four images : forest, sea, sunset and Effeil tower. Can I include a single thumbnail, for example a thumbnail of the Eiffel Tower, which on clicked, would display the image of the Eiffel Tower in the lightbox, but also those of the forest, sea and sunset. I tried many things but nothing works properly. If you have any ideas... Many Thanks.

PS: 我使用Twitter Bootstrap-1.3& FancyBox-2

PS: I use the Twitter Bootstrap-1.3 & FancyBox-2

推荐答案

您需要链接到图库中所有图像的链接，无论它们是否显示缩略图，因此您可能都拥有此html

You need a link to all the images in your gallery regardless they show a thumbnail or not so you may have this html

<a class="fancybox" rel="gallery" href="image01.jpg"><img src="thumbnail01.jpg" alt="" /></a>
<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>

等...这样，仅显示一个缩略图，其余链接不可见，但可以正常工作.

etc. ... in that way, only a single thumbnail is shown and the rest of the links are not visible but functional.

然后像这样的脚本将触发图库

Then a script like this will fire the gallery

$("a.fancybox").fancybox();

这篇关于FancyBox图库集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！