缩略图在点击后消失，FancyBox

我创建了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

---

解决方案

您需要在<a>-标记中定义图像源。即使您没有不同大小的缩略图和图库视图，您仍然需要定义它两次，如下所示：

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