Flash e thickbox

Molti di voi conosceranno lo script lightbox, che permette di aprire le immagini con degli effetti speciali. Però appunto solo immagini. Alan Curtis e juliusdesign hanno proposto delle soluzioni per far interagire i filmati flash con lightbox, però avendo sempre la limitazione sopra citata.

Flash e thickbox

Lo script thickbox, invece permette di aprire non solo immagini, ma iframe, pagine all’interno della stessa finestra in cui si naviga ecc. E allora con poche modifiche sono riuscito ad adattare thickbox ai filmati flash.

In particolare, in questo articolo, spiego come poter aprire un altra pagina (che conterrà qualsiasi cosa vogliate), all’interno della finestra thickbox.

Per prima cosa associate al pulsante il seguente codice:

on (release) {
getURL(”javascript:tb_show(’gallery’,'gallery.html?KeepThis=true&TB_iframe=
true&height=600&width=810′)”);
}

Nella funzione tb_show impostate il titolo della finestra (’gallery’), e la pagina che dovrà essere aperta, specificando le dimensioni in altezza e larghezza della finestra.

Nella pagina HTML che contiene il filmato flash dovrete inserire, tra i tag <head> e </head> queste tre righe di codice che “installano” lo script:

<script type=”text/javascript” src=”script/jquery.js”></script>
<script type=”text/javascript” src=”script/thickbox.js”></script>
<link rel=”stylesheet” href=”script/thickbox.css” type=”text/css” media=”screen” />

Infine, nel tag object dovrete inserire:

<param name=”allowScriptAccess” value=”sameDomain” />

E nel tag embed

allowScriptAccess=”sameDomain”

Guarda la demo

Scarica il sorgente AS2

Scarica il sorgente AS3

Vedi anche Flash e lightview

Ti è piaciuto l'articolo e non vuoi più perdertene neanche uno? Seguimi gratuitamente tramite i feed RSS.
Se non sai cosa sono, guarda questo video
Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

21 Commenti to “Flash e thickbox”

  1. Julius · 12 maggio 2008 14:37

    Ricorda di caricare in remoto anche l’icona per il preloading “loadingAnimation.gif”

  2. fedeweb · 12 maggio 2008 14:40

    Si grazie…me la sono scordata…

  3.   ThickBox: Gestire contenuti dinamici via HTML o Flash | JuliusDesign · 13 maggio 2008 07:42

    [...] aprire un iframe utilizzando anche flash con codice ActionScript in questo [...]

  4. Carlo Veltri · 13 maggio 2008 09:48

    Perfetto! Era da tempo che aspettavo un js con queste caratteristiche…

  5. Debora · 13 maggio 2008 10:43

    Ciao Federico. Sono una sviluppatrice di siti web e tempo fa ho avuto l’esigenza di integrare flash con lightwindow, per la sua gestione delle gallerie di immagini decisamente ben strutturata.
    In quella situazione, ho sviluppato il tutto interamente in flash…se per te dovesse essere fattibile l’interazione tra lightwindow e flash, a mio parere sarebbe molto interessante. Ciao!

  6. fedeweb · 13 maggio 2008 13:31

    - Carlo
    Molto bene, se hai dei dubbi chiedimi pure…

    - Debora
    Si ci lavorerò sopra, mi sembra molto interessante!!

  7. Aggiornamento sorgenti per flash cs3 « Fedeweb · 14 luglio 2008 09:44

    [...] sorgenti per flash cs3 Negli articoli che ho scritto tempo fa, riguardanti Flash e thickbox, Flash e lightview e Flash e lightview (Galleria di immagini), ho aggiunto i sorgenti per Flash [...]

  8. Aggiornamento flash e thickbox « Fedeweb · 5 agosto 2008 12:13

    [...] flash e thickbox Ho aggiornato il tutorial riguardante flash e thickbox, aggiungendo il sorgente per action script [...]

  9. Flash e lightbox - Action script 3 « Fedeweb · 25 agosto 2008 18:32

    [...] ricordo che nella sezione tutorial, ci sono altri articoli che potrebbero interessarvi, come flash e thickbox, o flash e [...]

  10. Linda · 6 ottobre 2008 09:49

    Ciao Fede…
    sono giorni che sbattevo la testa per trovare una soluzione a questa simbiosi… ed ecco qui il tuo il tuo sito :)

    una domanda vorrei farti… ma il flash originale non viene coperto dal background opaco?
    Se no… non c’è un metodo per coprirlo?
    Grazie
    Linda

  11. Linda · 7 ottobre 2008 16:10

    Ciau Fede
    ho caricato tutto, funziona ma ho il problema che non mi appare la finestrella per chiudere il thickbox… anche se clicco ESC non succede nulla… do cosa può dipendere? ufff :(

  12. fedeweb · 9 ottobre 2008 11:20

    Ciao Linda, prova a mandarmi il sorgente per e mail così vedo cosa posso fare ok?

  13. Luca · 7 dicembre 2008 21:27

    Ciao Fede,
    i sorgenti non sono + disponibili?
    Sai dove posso reperirli?

  14. fedeweb · 8 dicembre 2008 10:58

    Ciao! si che sono disponibili..basta che clicchi all’interno della finestra che si apre quando passi sopra il link dei sorgenti dove c’è scritto: “Click for .zip file”.

  15. [Actionscript 2] link "complessi" - Forum Flash CS3 Flash CS4 · 17 gennaio 2009 23:18

    [...] [...]

  16. Ubaldo · 17 gennaio 2009 23:23

    purtroppo il link dei sorgenti rimandano a http://it.altervista.org/

  17. fedeweb · 18 gennaio 2009 11:27

    Ciao è scritto nel commento sopra il tuo come scaricare i sorgenti..

  18. Hello Len* · 6 marzo 2009 11:50

    ciao!
    ho scaricato la tua demo per AS2 mi succede una cosa strana…
    se vado alla pagina della demo http://fedex05.altervista.org/flash-thickbox.html funziona (a parte il fatto che l’swf rimane in primo piano) invece se apro la pagina html nella cartella della demo scaricata, non funziona nulla..

    ovviamente non funziona nemmeno la pagina che sto provando a integrare con questa nuova funzione….

    qualche suggerimento?

  19. fedeweb · 6 marzo 2009 12:22

    Ciao! In che senso non funziona nulla? Quale problema ti da?

  20. hellolen · 6 marzo 2009 12:56

    beh che se apro la pagina della demo fatta da te (e scaricata al link in questa pagina) il collegamento non funziona, non si apre la thickbox.. ora, non so che tipo di problema io abbia visto che la demo online fnziona….

  21. fedeweb · 6 marzo 2009 13:43

    Questo sia con Internet Explorer che con Firefox? Se lo provi in locale devi prima permettere di eseguire il filmato flash. Quando premi ad esempio su “Fedeweb” premi su “Impostazioni” e da li devi aggiungere il file swf tra quelli consentiti..

Lascia un commento




© 2009 FedeWeb.

federico.pian@gmail.com