CODEWITHSUNDEEP
jqueryajaxloadfancybox
Ivan
Ivan

Reputation: 2481

Using fancybox in an AJAX loaded page

I searched in this group and googled around, but still no luck in answers I see also that some have my problem, but the threads didn't help, so here I am

The question is easy, and to help you I've packed a .zip with the files you can test

http://www.ivanhalen.com/fancyproblem.zip

  1. I have a main page with some linkes (index.php)
  2. Clicking on them loads a snippet througn AJAX (page.php)
  3. In the snippet there is one or more links, clicking on them should open an iframed fancybox (fb.php)

Well, the fancybox just won't work, except for the first opened link Then I keep getting a "t is not defined" error in Firefox, that points me nowhere I tried really everything I could imagine, but still no luck...

Please, can you help me? Thanks a lot

Upvotes: 3

Views: 13153

Answers (1)

rossipedia
rossipedia

Reputation: 59467

Don't put the script to fancybox() your links in content of the ajax response. Instead, what you want to do is move the fancybox() call into the complete() callback of the load function, like so:

$(document).ready(function(){
    $('#links a').live('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href');
        $('#content').load(url, function(data, stat, req){
            $("a#popup").fancybox();
        });
    })
});

Upvotes: 4

Related Questions