Fancybox gallery with jQuery's .live()

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.

Answer 2

It bothered me how in the above solution the fancybox function would be triggered every time you move your mouse over some fancybox element, so I wrote this, which works but does not trigger anything unless you click on it.

jQuery(document).on('click','.fancybox',function(e){
    e.preventDefault();//don't follow link
    jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
    jQuery(this).trigger('click.fb');//trigger click and fancybox popup
});

for old jQuery

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is('.fancybox')){
        e.preventDefault();//don't follow link
        jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
        self.trigger('click.fb');//trigger click and fancybox popup
    }
});