I created FancyBox gallery. But now when I click on thumbnails it shows up image galery as planned. But in background I can see that all thumbnails are disappearing one by one. After F5 or page reload all thumbnails are back.

My code:

    <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>

In application.js

$(document).ready(function() {
    $(".fancybox").fancybox();
});

Example you can see here

I created FancyBox gallery. But now when I click on thumbnails it shows up image galery as planned. But in background I can see that all thumbnails are disappearing one by one. After F5 or page reload all thumbnails are back.

My code:

    <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>

In application.js

$(document).ready(function() {
    $(".fancybox").fancybox();
});

Example you can see here

• javascript
• jquery
• fancybox

1 Answer 1

You need to have an image source defined in the <a>-tag. Even if you don´t have different size images for thumbnail and gallery view you still need to define it twice, like so:

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