callback for fancybox

Question

my jQuery Code

$("#div1").load("test1.html")  

$("a#link").fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'width'         : 400,
    'height'        : 200,
    'overlayOpacity': 0.5,
    'type'          : 'iframe'
});

After .load my fancybox doesn't work.

It work in test1.html.

How am i suppose to write it?

do you need to run .load() for test1.html ? Fancybox will not like that, it doesn't like to run within ajax'd content either... — Francis Kim, May 30 '12 at 05:35

score 2 · Accepted Answer · answered May 30 '12 at 04:53

I don't know anything about fancybox but when using the load function the data is loaded asynchronously so anything after the call to load could be done before it is loaded. you should add the code into the callback if you want it to effect the items you have loaded in.

$("#div1").load("test1.html", function () {
    $("a#link").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'width'         : 400,
        'height'        : 200,
        'overlayOpacity': 0.5,
        'type'          : 'iframe'
    });
})

score 0 · Answer 2 · edited May 23 '17 at 11:45

You might just need to add a ; semi-colon to the end of that line?

$("#div1").load("test1.html");

The syntax is wrong... are you getting any errors?

You also may want to consider binding this to a live() event. Otherwise the content from test1.html isn't going to be included.

See this post here:

Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load

callback for fancybox

2 Answers2