MyEgo.cz Osobní webzine Radka Hulána
Webdesign, CMS Radek Hulán 4 komentáře

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:

FlashLightbox 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č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

Komentáře 3

  1. #1 Jiří Komoň

    Elegantni reseni, ktere si poradi i s iframy, dik.
    Pokud je pripadny Flash vkladan primo jako OBJECT, da se i jednoduseji vyresit (pre)nastavenim wmode parametru:

    <param name="wmode" value="transparent" />

  2. #2 Radek Hulán autor webu ▲10 ▼0

    [1] WMODE v článku zmiňuji, ale většinu Flashových reklam nemáš pod kontrolou, dodávají je skripty třetích stran, takže to není řešení.

  3. #3 Michal ▲1 ▼0

    Díky, opravdu jednoduché a užitečné řešení.