Fancybox 和 Jquery 实现

Question

对此并不陌生，但正在取得进展。我使用 Fancybox 作为灯箱，但希望一个缩略图打开多个图像。我找到了this fiddle：

HTML：

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<div class="hidden">
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
</div>

CSS：

.hidden {
    display: none;
}

Javascript：

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });

我复制了 HTML 并将其粘贴到我的文档中。图像显示，但所有缩略图。取右上角的 CSS，粘贴到 fancybox.css 文件中。太好了，现在 3 个图像到一个缩略图，但它还包括页面上的任何其他图像。我必须在上面的 jsfiddle 文档的 HTML 框下方添加 .js，但我不知道需要将此代码添加到哪个文件。

Answer 1

您的问题确实不清楚，因为 Jeff 建议您尝试用示例来说明。 如果你指的是这部分代码

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });

这需要添加到您放置此 Fancy Box 的 html 页面中，并且您将其放置在 <script></script> 中，并将其放入 page load 事件中。