CODEWITHSUNDEEP
jqueryhtmlfancyboxthumbnailsfancybox-2
chizijs
chizijs

Reputation: 159

fancybox thumb not working

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>

Upvotes: 1

Views: 8396

Answers (2)

arttronics
arttronics

Reputation: 9955

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

Upvotes: 6

JFK
JFK

Reputation: 41143

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>

Upvotes: 0

Related Questions