Hide Flash banners when launching Fancybox modal

When launching image modal with Fancybox, Flash banners delivered from a third-party ad server could take over the top layer, covering the portion of the enlarged image.

The workaround is easy, but it’s not well documented. It’s done by Fancybox’s own callback options.

$('a[href$=".jpg"]').fancybox({ 
    onStart: function() { $('.banner object, .banner embed').hide(); }, 
    onClosed: function() { $('.banner object, .banner embed').show(); }
});

Other Fancybox callback options:
onStart, onCancel, onComplete, onCleanup and onClosed.

See it in action at Gadgeterija.net.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?