FancyBox Thumbnail Helper creates new thumbnail at end of thumbnails instead of calling it directly

问题

I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:

1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails

2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.

here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html

At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.

everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.

it's just this nuisance that's making an otherwise smooth functionality go to heck.

any kind of help would be appreciated, thanks so much in advance!

回答1:

Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script

$('.fancybox').fancybox({});

and 6 links with the same class as the selector bound to fancybox like

<a class="fancybox" href="{target}" .... etc

then fancybox will generate 6 thumbnails ... so far so good.

What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails

<div style="width: 820px; height: 546px;" id="content"></div>

but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.

Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.

Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.

EDIT : New questions asked:

I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?

Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.

Regarding the functionality you ask, what I would do is:

1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to

#content a {
position:absolute;
visibility: hidden;
}

3: change this script

$(function(){
        $('.image').live('click',function(){
            var href = $(this).attr('href');
                if ($('#content').is(':visible')) {
                    $('#content').css('visibility','hidden');
                    }
                $('#content').load('#load #'+href,function(){
                    $('#content').css('visibility','visible').hide().fadeIn('3000');
                });
        });
        return true;
})

into this

$(function(){
        $('.image').each(function(i){
            $(this).bind('click', function(){
                $("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
            }); // bind
        }); // each
        return false;
});

assuming that the thumbnails are in the same order as the links inside the DIV with id="content".

I haven't tested the code but it's pretty much what would do the trick

EDIT 2: code improved Some changes to the css and js

New css:

#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}

new js: displays the first big thumbnail on page load

$(function(){
 $("#content a").eq(0).show();
 $('.image').each(function(i){
  $(this).bind('click', function(){
   $("#content a").hide().eq(i).fadeIn('3000');
  }); // bind
 }); // each
 return false;
});

BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.

来源：https://stackoverflow.com/questions/9335102/fancybox-thumbnail-helper-creates-new-thumbnail-at-end-of-thumbnails-instead-of

标签

triggers

fancybox

gallery

thumbnails