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]

sorry ,fancybox:1.2.1 

Original comment by ly.fore...@gmail.com on 8 Jun 2009 at 6:26

[GoogleCodeExporter]

Same problem we need supported for live bind click event

Original comment by agaoglu....@gmail.com on 29 Jul 2009 at 1:20

[GoogleCodeExporter]

Is there an update on this issue yet? I'm running into the same problem with 
using
live to bind fancybox.

Original comment by blueskie...@gmail.com on 1 Oct 2009 at 11:09

[GoogleCodeExporter]

Any update?

Original comment by quang...@gmail.com on 13 Oct 2009 at 4:31

[GoogleCodeExporter]

We've used livequery for this (plugin for JQuery):
$("a.iframe").livequery( function(){    
        $(this).fancybox({ 
            'zoomSpeedIn': 300,     
            'zoomSpeedOut': 300,
            'frameWidth' : 915,
            'frameHeight' : 550
            });
    });

Original comment by blueskie...@gmail.com on 13 Oct 2009 at 10:40

[GoogleCodeExporter]

blueskies79: Did that work?

Original comment by waldemar...@gmail.com on 13 Oct 2009 at 11:36

[GoogleCodeExporter]

Yup, that helps to bind a live event to future instances of objects.
http://docs.jquery.com/Plugins/livequery

Original comment by blueskie...@gmail.com on 13 Oct 2009 at 11:51

[GoogleCodeExporter]

Yes that works!

Original comment by quang...@gmail.com on 13 Oct 2009 at 3:11

[GoogleCodeExporter]

Original comment by janis.sk...@gmail.com on 29 Oct 2009 at 4:16

• Changed state: Invalid

[GoogleCodeExporter]

Using of Livequery plugin is an alternative but not a solution of the problem.
Since vertion 1.3 query have buildin live() method.
For Example: 
$("a.img_zoom").live("click",function(){
alert($(this).attr('src'));
$(this).fancybox({ 'overlayShow':   true});
});
This code show alert, but fancybox don't start.

Original comment by dmons2...@gmail.com on 25 Dec 2009 at 4:26

[GoogleCodeExporter]

I confirm this. 
Using jQuery 1.3.2 
The .live does not work.
with livequery it works, but I think it is not necessary to load livequery if 
you use
jQuery 1.3

Original comment by thomas.w...@gmail.com on 7 Jan 2010 at 10:35

[GoogleCodeExporter]

Would like to see what the correct solution is to this other than using 
livequery
(which does work for those interested).

Original comment by scotts...@gmail.com on 8 Jan 2010 at 1:13

[GoogleCodeExporter]

Hi!
Thank you guys! I found solution for fancybox with ajax thanks to your advices. 
Some
additional problems I had with XSLT template. Javascript runs only on object 
event,
but not on <script></script> definition. So I've created a parent <div> as 
caller
"live()" function on mouseover event. And it's work!
<div onmouseover="$('a.zoom').live('hover', $('a.zoom').fancybox())>
<a id="zoom" ...>...</a>
<a id="zoom" ...>...</a>
<a id="zoom" ...>...</a>
<!-- ??? -->
<!-- PROFIT!!!! -->
</div>

Original comment by oleksade...@gmail.com on 24 Jan 2010 at 12:04

[GoogleCodeExporter]

To clarify, this is possible, although not yet heavily tested. Give required 
anchors
a class of fancybox then:

$(document).ready(function()
{
  $('a.fancybox').live('mouseover', function(){ $(this).fancybox() });
});

Original comment by ha...@hjbdesign.co.uk on 12 Mar 2010 at 10:59

[GoogleCodeExporter]

Or you can just change the lines in fancybox that bind the event to use .live 
instead
of .bind.  You also have to move the .data() to be inside the live callback so 
that
the options get saved to the element.  This is what my jquery.fancybox.js looks 
like
at around line 769:

$.fn.fancybox = function(options) {

   $(this)
.die('click.fb').live('click.fb', function(e) {

   $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() :
{})))

   e.preventDefault();

[...]

Original comment by jeff.g...@gmail.com on 24 May 2010 at 4:48

[GoogleCodeExporter]

jeff.gran, that works great. thank you

Original comment by fanekage@gmail.com on 14 Jun 2010 at 9:02

[GoogleCodeExporter]

Is there the way to save options when fancybox called for a group of elements?

Original comment by svit6.waw on 17 Aug 2010 at 8:04

[GoogleCodeExporter]

jeff, thank you so much. I test and it worked.

Original comment by donnykur...@gmail.com on 7 Sep 2010 at 12:59

[GoogleCodeExporter]

what version of FancyBox do u use? I've changed (v 1.3.1) in that way but it 
doesn't work! Could u attach the file plz?

Original comment by StV.low...@gmail.com on 11 Sep 2010 at 6:30

[GoogleCodeExporter]

I'm using v1.3.1. See the attachment. See line 770, or compare this file with 
the original 1.3.1 js file to see the changes.

Original comment by donnykur...@gmail.com on 11 Sep 2010 at 11:56

Attachments:

• jquery.fancybox-1.3.1.js

[GoogleCodeExporter]

I'll check. Thx!

Original comment by StV.low...@gmail.com on 12 Sep 2010 at 8:24

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Jeff, thank you so much for this wonderful solution. I've changed:
>>> .bind('click.fb', function(e)
with
>>> .live('click.fb', function(e)
and it works perfectly (fancybox 1.3.1).

Original comment by goran.ba...@gmail.com on 13 Sep 2010 at 8:10

[GoogleCodeExporter]

how do i call the fancybox now? i've modified the .js file, but the original 
call to the method changes???

Original comment by diego.ra...@gmail.com on 13 Sep 2010 at 8:12

[GoogleCodeExporter]

@diego, just use it like before, no need to change anything in your code:

$(".fancybox").fancybox(option);

But now, after a new .fancybox element inserted into the page, that element 
will automatically fancybox-ed, no need to re-bind it with fancybox.

Original comment by donnykur...@gmail.com on 13 Sep 2010 at 11:26

[GoogleCodeExporter]

You can use this. This worked for me.
$('.address').live('click', function(){                 
                $(this).fancybox({
                'width'             : '40%',
                'height'            : '70%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe',
                'onClosed'          : function() { $("#basket").load("/order/basket");    }
            }).trigger("click"); 
            return false;
            });

Original comment by chandras...@gmail.com on 17 Sep 2010 at 10:58

[GoogleCodeExporter]

This has been driving me crazy. Thanks Jeff! It works perfect. 
I've been doing a work around using focusin but never worked in Chrome. This is 
great. You don't even need to use the live function since its in the fancybos 
js now. Finally a solution.

Original comment by modst...@gmail.com on 26 Sep 2010 at 6:47

[GoogleCodeExporter]

This solution Jeff has won't work if you are using 1.4.1. It only works with 
1.4.2. Ploblem is .live submit doesn't work in 1.4.2 for IE see the bug link 
below.
http://forum.jquery.com/topic/ie-specific-issues-with-live-submit
So I fixed one thing and broke another. I hate the wretched IE browser. 
Anyway, what I did to fix both, since I have to have my whole site working is 
use 1.4.1 so everything works with IE too. Then use Jeff's fix but instead of 
this

.die('click.fb').live('click.fb', function(e) {

use the livequery just for fancybox like this

.die('click.fb').livequery('click.fb', function(e) {

That way your live submits work for dynamic forms in IE still and so will 
fancybox with new elements.

Original comment by modst...@gmail.com on 26 Sep 2010 at 9:27

[GoogleCodeExporter]

works great!
Thks Jeff!

Original comment by cban...@gmail.com on 20 Oct 2010 at 2:32

[GoogleCodeExporter]

sorry....not on IE

Original comment by cban...@gmail.com on 20 Oct 2010 at 4:51

[GoogleCodeExporter]

thanks jeff & donnykurnia!
i thought about redesigning my homepage because of this problem,
but now it works fine! 
Thanks very much!

Original comment by fabian.d...@googlemail.com on 13 Nov 2010 at 8:19

[GoogleCodeExporter]

Doesn't work on 1.3.4, tried editing the exact same lines that jeff.gran 
mentioned above. Can anybody else confirm?

Original comment by punjabil...@gmail.com on 2 Dec 2010 at 4:56

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

works for 1.3.4 for me :) Thanks a lot

Original comment by andreyco...@gmail.com on 4 Dec 2010 at 6:57

[GoogleCodeExporter]

The example Jeff posted works for me too (1.3.4). The stuff you actually have 
to change is on line 795, and it's only the "bind" that has to be changed with 
"live" :)

Original comment by asnm...@gmail.com on 7 Dec 2010 at 2:51

[GoogleCodeExporter]

use live to bind click events and fancybox : i changed .JS to Jeffs proposal; 
no change , fancybox only shows over and over again the starting image in 
GALLERY..(counting the number of images retrieved from the xml file...
can anyone give the error in the attached code ? although it seems the fancybox 
itself ... do we have to change the bind elsewhere in the .js ? 
headaches headaches..  please help me 

Original comment by ber...@gmail.com on 1 Jan 2011 at 12:07

Attachments:

• [example .txt](https://storage.googleapis.com/google-code-attachments/fancybox/issue-18/comment-36/example .txt)

[GoogleCodeExporter]

Because Jeff moved the options data bind into the click function, it does not 
bind the options to each of the images prior to clicking on them - therefore 
when the gallery attempts to move to the next image, that image's meta data is 
missing.

The best solution with this is to leave the lib alone and just restyle the new 
content on $().ajaxStop, or your $.get callback.

Original comment by strubes...@gmail.com on 7 Mar 2011 at 12:25

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

i found this solution which is working on fancybox 1.3.4 and jquery 1.5.1 
(credits goes to clmarquart), no need to change fancybox.js

$("a.quick_view").live("click",function(ev){
    ev.preventDefault();
    var id = this.href.match(/id=([0-9]*)/)[1];
    $.fancybox({
        href: "quick_view.php?id="+id,
        type: "iframe",
        'width'             : '50%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
    })
});

Original comment by fadi...@gmail.com on 7 Apr 2011 at 4:07

[GoogleCodeExporter]

Thank you fadi.

Original comment by penelope...@gmail.com on 9 Apr 2011 at 12:37

[GoogleCodeExporter]

Hi all,

I was hoping I might be able to get some help with an issue I am having.  I've 
been trying to figure out why this is happening for days.  It's pretty straight 
forward to explain.

I have a page that contains images, and those images are displayed in a 
fancybox window when they are clicked.  Some of these images are loaded 
dynamically after the page loads via AJAX.  

All of the images exist inside of link tags with 
class="challenge_image_gallery".  The code works the way it should on the 
images that are initially loaded on the page.  However, when the new images are 
loaded onto the page using AJAX, the fancybox window loads two instances of the 
image that was clicked on rather than one as it should.  Here's the code I'm 
using:

$(document).ready(function(){
      $("a.challenge_image_gallery").livequery(function(){
            $("a.challenge_image_gallery").fancybox({
                  'transitionIn'      : 'none',
                  'transitionOut'      : 'none',
                  'titlePosition'      : 'over',
                  'titleFormat'       : function(title, currentArray,currentIndex,currentOpts) {
return '<span id="fancybox-title-over">' + title + ' - Image '+  (currentIndex 
+ 1) + ' / ' + currentArray.length + ' ' + '</span>';
             }
            });
      });
});

Does anyone have any idea why this would be occurring?  I would really 
appreciate any insight because I am stumped.

Thank you so much!

Original comment by leff.mic...@gmail.com on 3 May 2011 at 2:28

[GoogleCodeExporter]

Thanks Fadi. That got me working.... to everyone else please note in Fadi's 
soltuion the href parameter has to be supplied.

Original comment by sirobins...@gmail.com on 12 May 2011 at 7:20

[GoogleCodeExporter]

Did this change not make it into 1.3.4?

Original comment by lee.hamb...@gmail.com on 12 May 2011 at 3:57

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I am having issues with the solutions above (jeff's and fadi's) when trying to 
run several images in a gallery. anyone know how to make that work?

currently i can only open one image at a time.

when I have several images in a gallery, clicking on the arrows does not change 
to the next image -- it stays on the same image.

inconsistently, the images will move next/previous but essentially the gallery 
is useless that way.

any ideas?

Original comment by mptorri...@gmail.com on 26 Jun 2011 at 3:28

[GoogleCodeExporter]

I discovered the issue with AJAX loaded content that have Fancybox iframes.  I 
also use Fancybox for image galleries, but they don't have AJAX loading.  
jeff.gran's solution fixed the AJAX loaded links for Fancybox iframes, but 
broke my regular image galleries.  I had the same symptoms that mptorriani 
describes.  I am using jQuery 1.6.2 and Fancybox 1.3.4.  I fixed my issue by 
keeping the original .data() call AND putting it inside the function.

/* original Fancybox lines (792-796) */
        $(this)
            .data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
            .unbind('click.fb')
            .bind('click.fb', function(e) {
                e.preventDefault();

/* my version */
        $(this)
            .data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
            .die('click.fb')
            .live('click.fb', function(e) {
                $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})));

                e.preventDefault();

Original comment by sonnysav...@gmail.com on 21 Jul 2011 at 7:25

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Well, each approach makes something work and breakes something else!

My solution is to use standard fancybox for common tasks and fixed one for your 
specific.

Original comment by stepan.z...@gmail.com on 27 Jul 2011 at 2:30

[GoogleCodeExporter]

Sonny (Comment 47)and Jeff (Comment 15). your solution are work. But if have 
problem with a[rel=group] galleries freezed at the first that I clicked cant 
not move to any pictures. But description its work. How to solve this problem. 

Original comment by Poom...@gmail.com on 2 Sep 2011 at 12:41