fancybox could not support in jquery.live()

[GoogleCodeExporter]

What steps will reproduce the problem?
First
1. use live to bind click event and fancybox(iframe) 
2. it doesn't trigger fancybox 
Second
1. use fancybox(iframe) + callbackOnClose to refresh elements
2. second time,fancybox was broken

What is the expected output? What do you see instead?
I expected fancybox appear and when close fancybox ,then
trigger to refresh some elements of the table
but second time ,fancybox is broken.

What version of the product are you using? On what operating system?
jquery:1.3.2
fancybox:2.1.2
OS:Windows 7 build 7000
Browser:Firefox 3.5b4
Please provide any additional information below.

Original issue reported on code.google.com by ly.fore...@gmail.com on 8 Jun 2009 at 6:15

[GoogleCodeExporter]

I had a similar issue and Sonny's solution seems to work for me.

Original comment by haw...@gmail.com on 2 Sep 2011 at 9:36

[GoogleCodeExporter]

May be a simpler solution but just triggering the click event manually works 
for me.  

$('a').live('click', function() {
  $(this).fancybox(settings).click();
});

Original comment by chriswil...@gmail.com on 3 Nov 2011 at 1:37

[GoogleCodeExporter]

chris's solution (comment 52 - 
http://code.google.com/p/fancybox/issues/detail?id=18#c52) works fine for me so 
far, and i like its simplicity. thanks chris!
-paul

Original comment by read.ish...@gmail.com on 19 Dec 2011 at 10:58

[GoogleCodeExporter]

The issue is that the elements for which you want to bind the click event to 
run the fancybox - doesn't exist when the fancybox code runs or when the dom is 
ready.

So adding the live event handler to the element like this
$('a.htmlPage').live('click', function () {
   $(this).fancybox();
   return false;
});

also will not work. What if you a collection of 'a' elements with class 
'htmlPage', the jQuery live will add the fancybox event to the clicked element 
(so if there are 10 only the one you clicked on) - still doesn't load up fancy 
box - but if you click it again - now magically it works. I had a list of links 
that I stuff into the dom with ajax method, then bind the fancy box event to 
all of them, when only one is clicked, and then load the fancy box with the 
htmlPage content I'm after like so for the given clicked element: (and then I 
actually run the click event on the now 'fancy boxed element')

$('a.htmlPage').live('click', function () {
   $(this).fancybox({ 'type': 'iframe' }).click();
   return false;
});

I load an HTML page into the fancy box with it's own CSS etc, so I have to use 
an iframe, but other than that - the above code works great!

Original comment by theun...@gmail.com on 29 Dec 2011 at 7:45

[GoogleCodeExporter]

The solution in comment #5 fixed the issue for me! Saved me a ton of time... 
thanks so much!

Original comment by nmcraes...@gmail.com on 20 Feb 2012 at 3:02

[GoogleCodeExporter]

I am having an issue with gallery next/prev buttons not appearing when using 
livequery...

This works 100% -
$('.fancybox').fancybox();

This works BUT, fails to recognize gallery context -
$(".fancybox").livequery(function(){
    $(this).fancybox();
});

jquery 1.6.4, fancy box 2.0.5 

Original comment by s...@livesource.co.nz on 18 Mar 2012 at 11:02

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

The minimal version of fancybox is attached below. This is as per comment 47 
and it supports live.

I just replaced line

.unbind("click.fb").bind("click.fb",function(d){
by

.die("click.fb").live("click.fb",function(d){b(this).data("fancybox",b.extend({}
,a,b.metadata?b(this).metadata():{}));

Original comment by shubha.g...@gmail.com on 8 Jan 2013 at 12:45

Attachments:

• jquery.fancybox-1.3.1.pack.js

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I added my call to the dynamic content itself to fix this:

echo "<a class = 'group' rel = 'grouped' href = 'image.jpg'>...."
and then after my closing div tag for the images: 
"</div><script>$('.grouped').fancybox({
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'           :   200, 
            'speedOut'          :   200, 
            'hideOnContentClick' : true,
            'overlayShow'   :   true
        });</script>";
I can't believe it took me so long to figure this out... I've had to do this 
for other little jquery quirks, too.  I realize this won't be a good solution 
for some people, but if you're also generating the data (through PHP/mySQL in 
my case), this ought to work.

Original comment by bigpant...@gmail.com on 18 Jan 2013 at 3:58

[GoogleCodeExporter]

Thank you so much Jeff, this was giving me some grief!

Original comment by brian.ka...@gmail.com on 1 Mar 2013 at 5:35