Problemer med Flash, Thickbox og Lightbox ved visning af billeder
februar 24th, 2008. Kategori: WebudviklingFlash og Thickbox
Jeg har tilføjet JavaScript biblioteket Thickbox til mit portfolio. Selvfølgelig for at få en mere lækker præsentation af mine billeder.
På mit portfolio viser jeg samtidig et lille Flash diasshow. I Internet Explorer 7 (IE7) gav Flash problemer sammen med Thickbox. Flashen lagde sig over Thickbox afblændningen, og dækkede også for selve billedet. Problemet opstod ikke i hverken Firefox eller IE 6.
En simpel løsning: sluk Flash og tænd Flash
Løsningen er simpel. Når Thickbox startes op, skal visningen af Flashen stoppes med noget JavaScript. Første skridt var at give mit Flash diasshow en id (‘dias’) i html’en, så jeg kunne få fat i den med JavaScriptet.
Dernæst tilføjede jeg øverst i : funktionen tb_show() i thickbox.js.
document.getElementById(‘dias’).style.display = “none”;
Og for at starte visningen af flashen igen. Stadig i thickbox.js i funktionen tb_remove() tilføjede jeg sidst i funktionen, lige før return false;:
setTimeout(“document.getElementById(‘dias’).style.display = \”block\””,150);
setTimeout(‘kode’,150) er for at forsinke visningen af flashen. Det er nødvendigt da Thickbox, ikke slukker sin afmaskning af baggrunden, men fader den ud. Det går rimeligt hurtigt, men hvis forsinkelsen ikke er der, vil Flashen nå at spring op foran thickbox’s billedboks. I mit tilfælde var en forsinkelse på 150 millisekunder passende.
Flash og Lightbox
På vej mod løsningen afprøvede jeg også den basale udgave af Lightbox. Men den gav det samme problem. Igen dækkede Flash for billedet og blev ikke blændet ned. Denne gang endda i både Explorer og Firefox.
Men efter jeg havde løst problemet i Thickbox, vendte jeg tilbage til Lightbox. Her placerede jeg de to kodelinier i henholdsvis funktionerne showLightbox() og hideLightbox().
Det var endda noget lettere, da koden i Lightbox er grundigere kommenteret og mere overskuelig. Endvidere fader Lightbox ikke sin visningsbox. Den slukker på en gang. Derfor kunne fjerne forsinkelsen og setTimeout(), fra den sidste kodelinie.
5 Responses to “Problemer med Flash, Thickbox og Lightbox ved visning af billeder”
By Niels on jun 18, 2008
Bemærk at jeg har brugt display=”none” til at skjule flashen, når thickbox er aktiv.
Det kan kun lade sig gøre fordi, siden er lavet med absolut positionering. Display:none fjerne nemlig det pågældende element fra flowet i HTML’en.
Hvis du ikke bruger absolut positionering, skal du istedet bruge: visibility = ‘hidden’ for at skjule flashen og visibility = ‘visible’ for at vise den igen, når thickbox fader ud.
Forskellen er at visibility kun gør elementet usynligt, og ikke fjerne det fra flowet. Derfor vil det ikke påvirke de øvrige elementes placering på siden.
By Michael on jul 22, 2008
Du kan nu sagtens have lightbox og lign. på en side med flash. Du har indsat flash kun med
Når flash indsættes kan du også sætte parameterne: ‘opaque’, ‘transparent’… Det er dem, du skal tænde på, når du vil have noget over flash. :o)
Jeg vil anbefale dig at bruge swfobject til at integrere Flash på dit site. Adobe gør (eller har gjort) javascript-metoden til standard. Den virker! :o)
/Michael
By Niels on jul 24, 2008
Lyder som en interessant metode, Michael.
Vil kigge nærmere på den næste gang jeg får behov for at integrere Flash på et website.
By Dennis Aaen on aug 2, 2008
@Michael
Jeg vil bare lige gør dig opmærksom på at dit link til din blog / hjemmeside er skrevet forkert, da den først tager Niels´ hjemmeside og så din.
Jeg er sikker på at Niels retter det for dig 🙂
By Niels on aug 2, 2008
Selvfølgelig Dennis. Det er fikset.