Question

I’m trying to get a fancybox window to come up on click after an ajax call. I can do that fine with

$(document).ajaxStop(function() { 

    //FancyBox image zoom functionality jQuery script
    $("a.aboutContentImage").fancybox({
        'zoomOpacity': true,
        'zoomSpeedIn': 300,
        'zoomSpeedOut': 300,
        'overlayShow': true,
        'frameWidth': 800,
        'frameHeight': 600
    }); 
});

I should note that a.aboutContentImage is not present on the page until after that ajax call.

Then after the windows has opened, I need to load in some text from an ajax call. I’ve tried

$("a.aboutContentImage").live("click", function(e) {

    // ajax here
});

But there’s some sort of compatibility issue with trying to put an event listener on a fancybox object.

Answer 1

First, why not just add the text to the image title? Fancybox automatically add the title into a caption. If you need to do something else, then try using the Fancybox onComplete callback (ref)? I haven’t tested this, but it should work:

$(document).ajaxStop(function() { 
  //FancyBox image zoom functionality jQuery script
  $("a.aboutContentImage").fancybox({
    'zoomOpacity': true,
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow': true,
    'frameWidth': 800,
    'frameHeight': 600,
    'onComplete' : function(){
      // do whatever here
      var txt = $('#text').text();
      $('#fancybox-title-float-main')
        .append(txt)
        .show();
    }
  }); 
});

Adding to the #fancybox-title-float-main will add on text to the end of whatever is in the title attribute. So you may want to use .html() instead of .append() or whatever.