Question

I am trying to display a Fancybox gallery with data that gets loaded via JSON. I was able to get the Fancybox to load properly after I load in and append the new HTML. However, when I attached rel=”somegroup” the gallery functionality doesn’t work and I cannot iterate through the group of images from the Fancybox.

Here’s my fancybox call:

$('.fancyness').live('click', function(){
        $.fancybox(this, {
            'width'         : 'auto',
            'height'        : 'auto',
            'titleShow'     : true,
            'titlePosition' : 'over'
        });
        return false;
    });

And here is what the images look like:

html += '<li><a class="fancyness" rel="group" href="' + full + '" title="'+ title +'">';
html += '<img title="' + item.title + '" src="' + thumbnail + '" alt="' + item.title + '" /></a></li>';

If I don’t use .live the gallery (rel) function will work correctly but not on this data because this is being loaded in with JSON.

Does anyone have any ideas? I haven’t had much luck finding anyone else with a similar issue.

Thank you.

Answer 1

I had a similar problem. I found something which looked promising over here if you are interested. The solution over there that seemed to work for most was to edit the fancybox code, replacing .bind with .live. I couldn’t get that to work for image galleries, though. Another suggestion (comment 14) did work (and doesn’t require any messing with fanybox). Try,

$("a.fancyness").live("mouseover focus", function() {
    $("a.fancyness").fancybox( {
        'width'         : 'auto',
        'height'        : 'auto',
        'titleShow'     : true,
        'titlePosition' : 'over'
    });
});

If you look at comment 14 from the link you’ll note that what is the second selector here is simply $(this) in that comment. That is fine for single images, but if you are using an image gallery you want fancybox to launch on all the images, not just the one you mouseover’d and then clicked (FYI I also included the focus event so the image gallery still opens if you keyboard-tab over a thumbnail and hit enter).

If you replace "mouseover focus" with "click" you will find that clicking on a thumb only fires the fancybox plugin. You then need to click a second time to actually launch your gallery – hence the "mouseover focus" events, instead.