{"id":131,"date":"2008-02-24T22:00:35","date_gmt":"2008-02-24T21:00:35","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/webudvikling\/flash_thickbox_lightbox_billeder_problemer.htm"},"modified":"2008-02-24T22:00:35","modified_gmt":"2008-02-24T21:00:35","slug":"flash_thickbox_lightbox_billeder_problemer","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/webudvikling\/flash_thickbox_lightbox_billeder_problemer.htm","title":{"rendered":"Problemer med Flash, Thickbox og Lightbox ved visning af billeder"},"content":{"rendered":"<h3>Flash og Thickbox<\/h3>\n<p>Jeg har\u00a0tilf\u00f8jet JavaScript biblioteket <strong><a href=\"http:\/\/jquery.com\/demo\/thickbox\/\" title=\"Thickbox demo\">Thickbox<\/a><\/strong> til mit <a href=\"http:\/\/nielsgamborg.dk\/cv\/portfolio.htm\" title=\"Multimediedesigners portfolio\">portfolio<\/a>. Selvf\u00f8lgelig for at f\u00e5 en mere l\u00e6kker pr\u00e6sentation af mine billeder.<\/p>\n<p>P\u00e5\u00a0mit portfolio\u00a0viser jeg samtidig et lille <strong>Flash<\/strong> diasshow.\u00a0I Internet Explorer 7 (IE7)\u00a0gav Flash problemer sammen med Thickbox. Flashen lagde sig over Thickbox afbl\u00e6ndningen, og d\u00e6kkede ogs\u00e5 for selve billedet. Problemet opstod ikke i hverken Firefox eller IE 6.<\/p>\n<h3>En simpel l\u00f8sning: sluk Flash og t\u00e6nd Flash<\/h3>\n<p>L\u00f8sningen er simpel. N\u00e5r Thickbox startes op, skal visningen af Flashen stoppes med noget JavaScript. F\u00f8rste skridt var at give mit Flash diasshow en id (&#8216;dias&#8217;) i html&#8217;en, s\u00e5 jeg kunne f\u00e5 fat i den med JavaScriptet.<\/p>\n<p>Dern\u00e6st tilf\u00f8jede jeg \u00f8verst i : funktionen <strong>tb_show()<\/strong> i thickbox.js.<\/p>\n<blockquote><p>document.getElementById(&#8216;dias&#8217;).style.display = &#8220;none&#8221;;<\/p><\/blockquote>\n<p>Og for at starte visningen af flashen igen. Stadig i thickbox.js i funktionen <strong>tb_remove()<\/strong> tilf\u00f8jede jeg sidst i funktionen, lige f\u00f8r <em>return false;<\/em>:<\/p>\n<blockquote><p>setTimeout(&#8220;document.getElementById(&#8216;dias&#8217;).style.display = \\&#8221;block\\&#8221;&#8221;,150);<\/p><\/blockquote>\n<p><strong>setTimeout(&#8216;kode&#8217;,150)<\/strong> er for at forsinke visningen af flashen. Det er n\u00f8dvendigt da Thickbox, ikke slukker sin afmaskning af baggrunden, men <em>fader<\/em> den ud. Det g\u00e5r rimeligt hurtigt, men hvis forsinkelsen ikke er der, vil Flashen n\u00e5 at spring op foran thickbox&#8217;s billedboks.\u00a0 I mit\u00a0tilf\u00e6lde var en forsinkelse p\u00e5 150 millisekunder passende.<\/p>\n<h3>Flash og Lightbox<\/h3>\n<p>P\u00e5 vej mod l\u00f8sningen afpr\u00f8vede jeg ogs\u00e5 den basale udgave af <strong><a href=\"http:\/\/www.huddletogether.com\/projects\/lightbox\/\" title=\"Lightbox demo\">Lightbox<\/a><\/strong>. Men den gav det samme problem. Igen d\u00e6kkede Flash for\u00a0\u00a0billedet og blev ikke bl\u00e6ndet ned. Denne gang endda i b\u00e5de Explorer og Firefox.<\/p>\n<p>Men efter jeg havde\u00a0l\u00f8st problemet i Thickbox,\u00a0 vendte jeg tilbage til Lightbox. Her placerede jeg de to kodelinier i henholdsvis funktionerne <strong>showLightbox()<\/strong>\u00a0og <strong>hideLightbox()<\/strong>.<\/p>\n<p>Det var endda noget lettere, da koden i Lightbox er grundigere kommenteret og mere overskuelig. Endvidere <em>fader<\/em> Lightbox ikke sin visningsbox. Den slukker p\u00e5 en gang. Derfor kunne fjerne forsinkelsen og <em>setTimeout(),<\/em>\u00a0fra den sidste kodelinie.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flash og Thickbox Jeg har\u00a0tilf\u00f8jet JavaScript biblioteket Thickbox til mit portfolio. Selvf\u00f8lgelig for at f\u00e5 en mere l\u00e6kker pr\u00e6sentation af mine billeder. P\u00e5\u00a0mit portfolio\u00a0viser jeg samtidig et lille Flash diasshow.\u00a0I Internet Explorer 7 (IE7)\u00a0gav Flash problemer sammen med Thickbox. Flashen lagde sig over Thickbox afbl\u00e6ndningen, og d\u00e6kkede ogs\u00e5 for selve billedet. Problemet opstod ikke i [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[102,143,163,208,264,296],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/131"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}