En online notesbog

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.

  1. 5 Responses to “Problemer med Flash, Thickbox og Lightbox ved visning af billeder”

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

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

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

  5. 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 🙂

  6. By Niels on aug 2, 2008

    Selvfølgelig Dennis. Det er fikset.

Skriv en kommentar