FancyBox画廊集成

时间:2012-02-03 23:31:12

标签: jquery fancybox gallery thumbnails hidden

我对FancyBox的整合有疑问。 我会创建一个包含10张图片但只有一个缩略图的图库。 例如: http://fancyapps.com/fancybox/demo/ 第一次演示展示了四幅图像:森林,海洋,日落和Effeil塔。 我可以包含一个缩略图,例如艾菲尔铁塔的缩略图,点击后会在灯箱中显示艾菲尔铁塔的图像,还会显示森林,大海和日落的图像。 我尝试了很多东西,但没有任何正常工作 如果你有任何想法...... 非常感谢。

PS: 我使用Twitter Bootstrap-1.3&的fancybox-2

2 个答案:

答案 0 :(得分:4)

您需要指向图库中所有图片的链接,无论它们是否显示缩略图,您都可以使用此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>

等。 ......以这种方式,只显示一个缩略图,其余链接不可见但功能正常。

然后像这样的剧本会触发画廊

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

答案 1 :(得分:2)

您只需将display:none添加到您不想显示的链接即可。

e.g。 http://jsfiddle.net/MvvuE/