Fancybox onComplete not working

Question

For some reason, it just doesn't execute the onComplete function. However, it loads the fancybox div. My html:

 <ul> <li class="orange"> #1 <a href="#text">click here</a> <div id="text" class="text">text text text</div> </li> </ul> 

My jquery:

  jQuery('li a').fancybox({ 'autoDimensions': 'false', 'width' : 631, 'height': 256, 'onComplete':function(){ alert('running'); jQuery('.fancybox-skin').css('background-color',colour); } }); 

warning does not start. I also tried changing the function of the event to onClosed and other events, and nothing.

Answer 1

I think you forgot to indicate which version of fancybox you are using.

onComplete is a callback function for fancybox v1.3.x, and the fancybox-skin class was introduced before version 2.x, ..... so I assume you are using version 2.x, aren’t you?

Fancybox v2.x options are new and incompatible with previous versions; the equivalent for the onComplete parameter (v1.3.x) is now the afterLoad (v2.x) callback function.

Check out http://fancyapps.com/fancybox/#docs for a complete list of options, methods, and callbacks for fancybox v2.x

Answer 2

afterShow I think this is the correct equivalent of onComplete in Fabxybox 2

Answer 3

Fancybox version 2 does not support onComplete . It uses afterLoad .

 jQuery('#tips li a').fancybox({ 'autoDimensions': 'false', 'width' : 631, 'height': 256, afterLoad:function(){ alert('running'); jQuery('.fancybox-skin').css('background-color',colour); // colour to 'red' for example. typo } }); 

Answer 4

looks like typo

 jQuery('#tips li a').fancybox({ 'autoDimensions': 'false', 'width' : 631, 'height': 256, 'onComplete':function(){ alert('running'); jQuery('.fancybox-skin').css('background-color',colour); // colour to 'red' for example. typo } }); 

Working example