Blog om foto, web og brugervenlighed

Problemer med Flash, Thickbox og Lightbox ved visning af billeder

februar 24th, 2008. Kategori: Webudvikling

Flash 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.