jquery - FancyBox 画廊集成

Question

我有一个关于 FancyBox 集成的问题。我会创建一个包含 10 张图片但只有一张缩略图的图库。例如: http://fancyapps.com/fancybox/demo/第一个演示展示了四个图像:森林、海洋、日落和埃菲尔铁塔。我可以添加一个缩略图吗，例如埃菲尔铁塔的缩略图，单击该缩略图后，会在灯箱中显示埃菲尔铁塔的图像，还有森林、海洋和日落的图像。我尝试了很多东西，但没有任何效果正常。如果您有任何想法...非常感谢。

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

Answer 1

您需要一个指向图库中所有图像的链接，无论它们是否显示缩略图，这样您就可以拥有此 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();