Lightbox fotka překrytá Flash reklamou - co s tím?

Pokud máte na svém webu reklamu třetích stran, většinou bude implementována jako IFRAME a v něm Flash či text či přímo jako Flashový OBJECT. A protože tuto reklamu dodávají třetí strany a špatně používají WMODE, tak při použití Lightbox skriptů pro zvětšování fotek dochází k tomu, že Flash reklama překryje zvětšenou fotku.

Vypadá to nějak takto:

Lightbox překrytý Flash reklamou

Většina Lightbox skriptů naštěstí má i onLoad a onClosed události, na které můžete navěsit to, že tuto reklamu prostě schováte při otevření náhledu přes CSS visibility:hidden a po zavření Lightboxu obnovíte. Pokud nepoužíváte na svém webu IFRAME a OBJECT prvky, můžete v případě Colorboxu (založeného na jQuery) vše implementovat třeba takto triviálně - důležité jsou ty tučné části:

$(document).ready(function(){ $("a[rel='colorshow']").colorbox( {
 slideshow:true, 
 slideshowAuto:false, 
 maxWidth:'95%', 
 maxHeight:'95%', 
 scalePhotos:true,
 onOpen: function(){$('object,iframe').css('visibility','hidden');},
 onClosed: function(){$('object,iframe').css('visibility','visible');}
} ); });

Při otevření nového náhledu fotky poté Flash a IFRAME reklama prostě zmizí, při zavření je opět zpět. Pokud používáte vlastní IFRAME / OBJECT, musíte jej ze selektorů vyjmout.

A bude to vypadat takto:

Flash je na chvíli pryč

Pokud chcete počítat s tím, že nějaké OBJECT / IFRAME prvky budou schované, můžete skript drobně přepsat tak, aby počítal s původním visibility:hidden a uschoval si hodnotu do rel atributu (ale většinou to nebývá nutné, toto řešení je mírně pomalejší):

onOpen: function(){
 $('object,iframe').each(
   function(){ $(this).attr('rel', $(this).css('visibility'))}
 ).css('visibility','hidden');
},
onClosed: function(){
 $('object,iframe').each(
   function(){ $(this).css('visibility', $(this).attr('rel'))}
 )
}  

Praktický příklad: fotogalerie MTBS.cz