Flash e Lightbox

- Letture: 6.725

Ecco un piccolo esempio di come far intereagire Lightbox (cornici retroilluminate) con filmati Flash.

Il primo ha usare questo metodo per focalizzare l’attenzione sulle foto è stato il fotografo canadese Jeff Wall.

Qui a lato, cliccando sulla foto, potete vedere un esempio, di come flash può essere messo in relazione con questo effetto Lightbox, ovvero l’apertura di un anteprima su uno sfondo, che copra l’intero sito, concentrando tutta l’attenzione sulla foto.

Nella pagina HTML ci basterà richiamare lightbox.js e lightbox.css, che servono per l’effetto anteprima e per personalizzare i vari oggetti di preloading.

Sul nostro pulsante avremo il seguente codice:

on(release) {
getURL("javascript:flashLightbox('image.jpg');");
}

Implementazioni aggiuntive

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

97 Commenti

  1. Ciao Julius,
    grazie e scusa per il disturbo, ma poi mi sono accorto che era un problema sui permessi dei files tutti settati su 700.
    Un grazie anche a Marchino.

    Fabrizio

  2. Ciao!
    Volendoci complicare la vita,non si potrebbe agguingere una “X”per chiudere la foto (invece di fare doppio clic sulla foto)?
    Si puo’fare?
    E come?:-)

  3. Trappagfx

    ciao j…scusa se rompo ma ho un problema…
    ho un swf di un video che si sovrappone alla flash lightbox mentre la richiamo…cm posso fare?

    grazie

  4. Il codice ke rikiama lightbox.js e lightbox.css, da inserire nella pagina html, quale è precisamente?Grazie

  5. @Trappagfx controlla il codice che usi per pubblicare il video in swf

    se usi i tag object e embede potresti avere dei problemi

    Utilizza questo metodo

    @boh entra nella pagina html di esempio che trovi nei file sorgenti e dopo i tag head trovi il codice che richiama il file

  6. Vorrei cortesemente sapere, quali istruzioni si devono aggiungere nel file: lightbox.js per far apparire sotto le foto ingrandite il testo “Clicca sulla foto per chiuderla”; oppure ancora meglio, per inserire una piccola immagine con il testo indicato.

    Grazie

  7. maria pia

    Complimenti questo sito è sempre utilissimo!
    Premettendo che non sono molto ferrata in materia potreste dirmi quali sono i codici da inserire nella pagina HTML (E DOVE)per richiamare lightbox.js e lightbox.css?devo inserire altri codici? GRAZIE

  8. @luigi: ciao

    devi interagire nell codice in cui vengono settati i parametri del box

    puoi inserire un testo da HTML

    @maria pia: ciao

    se scarichi l’esempio e leggi il codice della pagina noterai che il CSS e JS viene richiamato tra i TAG “head”

  9. Massimiliano

    Ciao julius,
    complimenti per il sito…
    sto usando lightwindow 2.0 per far aprire da un flash la finestra modale con all’interno un form.

    Due cose ho difficoltà:
    1. Devo controllare i campi del modulo prima di farlo inviare…ma sembra che non mi prenda lo script java (sembra funzionare solo se il file del modulo si trova su un altro server di quello da cui lo richiamo)

    2. Una volta inviato il modulo non riesco a recuperara (ne tramite $_GET ne tramite $_POST) i dati compilati dall’utente.

    Confido in voi…
    Grazie 1000
    Max

  10. Non riesco arisolvere questo problema. se inserisco il bottone in una immagine fissa, funziona tutto perfettamente, se inserisco il bottore in clip che scorre, la finestra si apre ma non carica le immagini, si vede solo il grigio semi trasparente. HELP!

  11. Dino ha scritto:

    Ciao Julius. Seguendo il tuo consiglio sulla soluzione LightWindow v.20 ho cercato sui forum e ho trovato la soluzione per usare un effetto Lightbox per aprire una pagina HTML da un file flash.
    All’interno del progetto flash va creato un buttone ed inserito il seguente comando script ‘on(release)’ :
    getURL(”javascript: myLightWindow.activateWindow({href: ‘URL’, title: ‘TITLE’, author: ‘AUTHOR’, caption: ‘CAPTION});”)
    dove URL, TITLE, AUTHOR and CAPTION are your url della pagina, titolo etc….
    Una volta creato il file SWF ed inserito all’interno di una pagina html assicurati di includere i file necessari del LightWindow 2.0 :
    ae nel tag html per gestire l’oggeto flash () , assicurati di aver definito i seguenti parametri :
    Similmenti assicurati anche che per il tag siano stati indicati i medesimi parametri:
    wmode=”transparent”
    allowScriptAccess=”always”
    L’ho provato e funziona benissimo.
    Dino

    Scusate, ma a me non funziona, mi dite cosa sbaglio?Il comando nell’on release è questo :

    getURL(“javascript: myLightWindow.activateWindow({href: ‘pagina.html’, title: ‘titolo’, author: ”, caption: ”});”);

    Grazie

  12. Tes ha scritto:

    Altro problema… con IE non mi carica il file flash!
    HELP

    risolto, era un mio errore.

  13. @Tes:

    A me invece con IE non funziona. Comincia a caricare la finestra e la fa sparire in alto a sinistra

  14. ho seguito il tutorial di alan curtis per flash e lightbox,
    premetto che non sono un esperto nè di as nè javascript, cmq mi funziona tutto perfettamente su ie7 firefox e safari per windows, ora il problema è che su firefox e safari per mac non funziona!?
    qualcuno può aiutarmi!?

    grazie

  15. ..ma ho seguito quello di alan curtis perche ha l’aggiunta per lo scorrimento delle anteprime.. cmq su safari per windows è tutto ok, su safari per mac qualche foto non la apre.. mentre con firefox per mac niente di niente!?

    è ovvio che il problema non è il browser ma il mac..
    puo esserci una soluzione?
    non so nessuno ha riscontrato problemi usando il tutorial di alan curtis con firefox o safari su mac?

    please help!

  16. ciao a tutti e complimenti per il lightbox
    davvero bello julius!
    ho un piccolo problema
    ho un form per l’invio di email nella pagina flash
    che però non permette la scrittura del carattere
    @ se attivo wmode = trasparent
    qualcuno ha qualche consiglio???

  17. ciao a tutti.
    mi sto innervosendo davanti ad un problema…
    richiamo il lightobx da un swf che si trova dentro un iframe.
    ovviamente il lightbox quindi si apre dentro l’iframe.
    come faccio a farlo comparire su tutta la pagina principale?
    penso che tocca modificare il java…ma come?

  18. ciao a tutti.
    mi sto innervosendo davanti ad un problema…
    richiamo il lightobx da un swf che si trova dentro un iframe.
    ovviamente il lightbox quindi si apre dentro l’iframe.
    come faccio a farlo comparire su tutta la pagina principale?
    penso che tocca modificare il java…ma come?

  19. sempre io…allora diciamo che mi sono arreso, e ho abbandonato l’iframe.

    ora sorge un altro problema.
    spero che qualcuno risponda.

    1) se uso l’esempio con scorrimento anteprime mi carica soltanto la prima immagine.
    potete vedere un esempio su http://www.marcomilanese.com/easy_2/foto_2.html

    2) se invece volessi usare l’esempio senza lo scorrimento anteprime(che cmq potrebbe andare bene per mie esigenze) non saprei come dichiarare le più immagini nella pagina html.

    Consigli?

  20. Marcello

    Ragazzi scusate se faccio una domanda forse stupida visto che in rete non ho trovato la soluzione..
    Qualcuno di voi ha avuto problemi con il wmode e la @ di un form?

    Mi spiego meglio:
    per firefox la lightbox funge se ha il parametro wmod transparent; ma se nello stessa pagina html c’è il richiamo ad un swf che include un modulo di testo di input la @ viene disabilitata, o meglio la si ottiene con shift+”.

    Potete aiutarmi?

    Garzie

  21. Ciao Julius sono un programmtore, ho un piccolo problema, sto realizando un sito in flash, che pero pubblico usando flash 8, in modo tale che si adatti a tutte le risoluzioni (scalando e mettendo le percentuali delle dimensioni al 100%) senza usare swfobj di javascript. Ora usando la libreria del lightbox non mi risulta niente anzi mi sembra come se l’imagine venisse pubblicata sotto il filmato aprilo con IE e capirai forse con ff sembra non avevre alcun effetto…
    http://illuzzidaniele.netsons.org/plum/

  22. Ciao Julius,
    Ho utilizzato anche io le istruzioni per inserire su un filmato flash un po più complesso.

    L’unica cosa è che mi carica l’immagine dietro a tutto l’swf.
    Ci sono dei parametri nell’html da specificare per questo ?

    Ti prego fammi sapere presto grazie.

  23. Ciao Julius!

    piccola domanda, se faccio tutto il sito in fullscreen, il js non mi fa visualizzare l’immagine, ammenoché non torno alla modalità normale.

    Sai percaso come risolvere questo problema ?

    Grazie :P

  24. Ciao Julius,
    come posso creare 3 pulsanti un un’unico frame e richiamare 3 lightbox da tre cartelle diverse utilizzando as2?
    sto giocando con il codice creato da alan curtis ‘Flash LightBox v2’, ho creato la prima gallery (e questo non è stato difficile :) )
    trovo problemi a creare seconda e terza.

  25. Ciao Julius,
    complimenti per il sito! Veramente utile.
    Vengo al dunque…. sto smanettando con un sito in flash con as3 e ho notato questo tutorial. Il sito è composto dalla home e da 3 pagine esterne che vengono caricate dinamicamente. Se io vado a montare il codice sulla pagina della gallery e vado poi a pubblicare, mi restituisce questi errori:

    1046: Tipo non trovato o non è una costante della fase di compilazione: Closelabel.
    1180: Chiamata al metodo non definito Closelabel.
    1180: Chiamata al metodo non definito Prevlabel.
    1180: Chiamata al metodo non definito Nextlabel.

    Il sito (swf) non da problemi, ma non parte il lightbox. Da cosa può dipendere?
    Grazie mille
    luca

  26. @ Cl@udio:
    sono giorni che vago per la rete alla ricerca di qualcuno che abbia avuto il mio stesso problema e che sia riuscito a risolverlo…
    Sto usando anch’io il lightbox v2 di alan curtis e funziona perfettamente richiamato dal mio file di flash, l’unica cosa è che dovendo far aprire diverse immagini contenute in cartelle distinte ho bisogno che me le tenga distinte appunto! Ora invece accade che pur selezionando una sezione specifica mi vengono visualizzate tutte le immagini di fila contenute nelle sottocartelle della cartella generale “img”.
    Cl@udio o (qualche anima pia), potresti spiegarmi meglio come hai aggiunto i due nuovi Array? Devo cambiare qualcosa anche nelle azioni che richiamano le immagini da flash?
    non sono proprio un asso con gli script :-(

  27. Ciao Julius…grazie mille innanzitutto per il prezioso aiuto che ci fornisci continuamente, sei un grande.
    Sono anche io in difficoltà per una cosa, e penso (spero) che tu sia l’unico a potermi dare una risposta.

    Quello che vorrei realizzare (in Flash in questo caso, ma anche su altre piattaforme) è riuscire ad ingrandire l’immagine con il lightbox, e fare in modo che l’immagine però si adatti alla dimensione della finestra del browser.
    Mi spiego meglio:
    se nella cartella immagini inserisco un’immagine di 2000x3000px, questa una volta aperta con il lightbox non si ridimensiona adattandosi alla dimensione della finestra del browser in cui la sto guardando.

    Mi è stato richiesto per un sito in cui vorrebbero fare in modo che le immagini si possano vedere a tutto schermo anche su monitor da 25/30 pollici.

    Esiste una soluzione?
    Io sto provando a smanettare con i file css e js..ma niente!

    Ti ringrazio ancora ed in anticipo!
    Saluti e complimenti!!

  28. ciao Julius e ragazzi del blog, ho un problema con IE su windows, tutti gli altri browser funzionano … può essere qualche conflitto!?!
    il sito in questione è http://www.capehorn.it -> collezione UOMO o DONNA ….
    qualche suggerimento!?!
    thx
    Pol

  29. ciao julius. ti chiedo una cosa che non trovo sulle domande che ti pongono. ho implementato sul mio sito il lightbox 2 (per As 2), e sembra tutto a posto, ma non funziona nè su explorer 8 e neppure su safari. se copio passo passo i tag dall’index.html del lightbox riesco a farlo funzionare. però ho un index che ha dimensioni prestabilite.
    invece io pubblico l’index da flash in fullscreen, e puntualmente quando vado a reimpostare il lightbox, questo non funziona.
    posso postarti da qualche parte l’index.html? secondo me è qua l’inghippo, e deve essere tra l’altro una cosa banale, eppure non ci arrivo a risolverla. ciao. fabio

  30. e se invece volessi attivarlo da un bottone comunissimo in .png? Ho fatto così ma è evidente che ho sbagliato qualcosa


  31. Veronica

    io ho un sito con dimensioni dello swf in percentuale (100%) con allowscale =false (in modo da avere il sito sempre centrato) però ho notato che a causa di ciò il flashbox funziona malissimo…appena tolgo le dimensioni percentuali tutto torna normale invece!
    Qualcuno sa come aiutarmi? :(

    ps: parlo del lightbox modificato da ALAN.

    Grazie a tutti

    ps: Julius ti ho scritto anche “altrove” :P non uccidermi son disperataaaaa! :°D

    Ciaoo

  32. The joke

    ciao Julius,

    Il mio lightbox è in un swf esterno caricato da main.swf, funziona tutto… solo che quando clicco sulla thumb e si apre il lightbox lo sfondo grigio copre tutto, non è trasparente com’è di solito.

    Il problema è che è caricato esternamente? cosa dovrei modificare?

    grazie!

  33. Salve, ho anche io il problema di The Joke, mi sparisce il filmato flash sotto… qual’è il problema?

  34. Ho provato a richiamare l’swf in un box di un’altro swf con loadmovie, compaiono le miniature ma non funzione il lightbox, qualcuno saprebbe aiutarmi ?

Commenti