我创建了FancyBox画廊。 但现在,当我点击缩略图时,它会按计划显示图像galery。 但在背景中我可以看到所有缩略图一个接一个地消失。在F5或页面重新加载后,所有缩略图都返回。
我的代码:
<a class="fancybox" data-fancybox-group="gallery" title=""> <%= image_tag('s_1.jpg') %></a>
<a class="fancybox" data-fancybox-group="gallery" title=""><%= image_tag('s_2.jpg') %></a>
<a class="fancybox" data-fancybox-group="gallery" title=""><%= image_tag('s_3.jpg') %></a>
<a class="fancybox" data-fancybox-group="gallery" title=""> <%= image_tag('s_4.jpg') %></a>
<a class="fancybox" data-fancybox-group="gallery" title=""> <%= image_tag('s_5.jpg') %></a>
在应用 .js
中$(document).ready(function() {
$(".fancybox").fancybox();
});
示例您可以看到here
答案 0 :(得分:5)
您需要在<a>
- 标记中定义图像源。即使您没有缩略图和图库视图的不同大小的图像,您仍然需要定义两次,如下所示:
<a class="fancybox" href="image_source" data-fancybox-group="gallery" title=""><img src="image_source" alt="" /></a>