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

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

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

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

Fancybox和Jquery实现

1 个答案: