FancyBox 画廊集成

发布于 2025-01-02 12:19:23 字数 346 浏览 4 评论 0原文

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

附：我使用 Twitter Bootstrap-1.3 & FancyBox-2

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白况 2025-01-09 12:19:23

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

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