fancybox thumb not working

Question

I have in my webpage Fancybox 2 thumbnails.

One thumb is working, but the second isn't. Instead, it opens that second thumb in the browser tab.

How can I fix this so the second thumb works correctly in Fancybox?

HTML:

<script>
      $('.slideshow-thumbs2').fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: false,
        arrows: false,
        nextClick: true,
        helpers: {
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
</script>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev1.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev1.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt="" class="active"/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev2.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev2.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev3.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev3.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev4.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev4.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>

score 6 · Answer 1 · edited Jun 20 '20 at 09:12

jsFiddle DEMO: Fancybox v2.1.3 and Thumbnail Helper

Your pasted code shows that the very first Fancybox item has class="active" which may affect the other thumbs from not working.

However, there isn't enough information to determine why it only works for 1 thumb and not the other if that isn't the problem.

Make sure you've loaded at least jQuery v1.6.4 and are using 4 Fancybox2 files.

Two files are for Fancybox, and the remaining two files are for the Thumbnail Helper feature as shown in your .fancybox() function. You can find those helper files are in the helper folder from the downloaded Fancybox 2 installation files you have.

The 4 mini-thumbnails that are shown inside Fancybox 2 screenshot below is by using the Thumbnail Helper files of jquery.fancybox-thumbs.css and jquery.fancybox-thumbs.css.

enter image description here

score 0 · Answer 2 · answered Jan 06 '13 at 01:34

you have to wrap your code inside the ready() method like :

<script>
 $(document).ready(function(){
      $('.slideshow-thumbs2').fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: false,
        arrows: false,
        nextClick: true,
        helpers: {
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
 });
</script>

fancybox thumb not working

2 Answers2