0

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.

Anna
  • 544
  • 9
  • 21
  • `$('A[rel=group]').fancybox({` - Changing the Fancybox to this allows the group to open, however, it adds the same image to the list of images in the group at the last index, so the image is in there twice. Is there anyway to get around the extra image? – Anna Sep 12 '11 at 13:47

2 Answers2

5

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.

Sam
  • 557
  • 6
  • 20
  • I guess you may have either solved the issue yourself, or worked around it by now. If so I hope this might help anyone else who comes across it trying to solve the same problem, as I did. – Sam Sep 21 '11 at 14:22
  • This does work! I like this fix better than the one I did above. I also figured out why I had an extra image that I mentioned in my comment on my original post. Thank you for this! :) – Anna Sep 22 '11 at 13:35
5

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
    }
});
Timo Huovinen
  • 53,325
  • 33
  • 152
  • 143
  • +1 for jQuery('.fancybox').fancybox() - updating FB's registry. – BasTaller Jan 31 '12 at 20:40
  • great! now replace the depreciated 'live', with new 'on' event handler (from jquery 1.7 onwards) jQuery(document).on('click','.fancybox',function(e){.. – Dipesh KC Jul 27 '12 at 13:44