0

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

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，但我不知道需要将此代码添加到哪个文件。

4

1 回答 1

0

你的问题真的不清楚，因为杰夫建议尝试用例子来说明。如果你的意思是这部分代码

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

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

于 2013-01-23T02:22:18.447 回答