javascript - 缩略图点击后消失，FancyBox

Question

我创建了 FancyBox 画廊。但现在，当我单击缩略图时，它会按计划显示图像库。但在后台我可以看到所有缩略图都一一消失。 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

Answer 1

您需要在 <a> 中定义图像源-标签。即使您没有用于缩略图和图库 View 的不同尺寸图像，您仍然需要定义两次，如下所示:

<a class="fancybox" href="image_source" data-fancybox-group="gallery" title=""><img src="image_source" alt="" /></a>