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 compra 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');");
}
Scarica il sorgente
Guarda il Tutorial
Implementazioni aggiuntive
Scarica il sorgente
Guarda il Tutorial
Senza categoria
58 Commenti
saverio
24 Marzo 2007 alle 16:24 pm
ma l’effetto lightbox è possibile farlo anche con i filmati, cioè clikko sul box del filmato e con lo stesso effetto che oscura tutto il resto ho una finestra in primo piano in cui gira il filmato.
Julius
25 Marzo 2007 alle 13:46 pm
@saverio l’effetto ovviamente si puo fare anche con flash, ma se il tuo flash e 200×200 per far scurire l’intera pagina dovresti lavorarci un po’ di più, ovviamente possibile…ma questo tutorial è solo per far vedere come intereagire Flash con Lightbox tutto qui…
ciao
Manuel
26 Aprile 2007 alle 15:38 pm
sto facendo un sito in flash che prevede l’utilizzo del lightbox per visualizzare i popoup delle immagini in una galleria.
funziona tutto perfettamente, l’unico problema è che quando chiudo il lightbox devo cliccare sulla pagina prima di poter riaprire un altro popup.
qui un esempio di quel che succede:
http://rnrstyle.altervista.org/tlb/prova.html
come posso fare per rendere automaticamente attiva la mia pagina madre quando chiudo il lightbox?
grazie per l’aiuto
Julius
26 Aprile 2007 alle 17:43 pm
Ciao Manuel,
sinceramente non riesco a capire il tuo problema
Ho visto la pagina, premettendo che manca il famoso script per ovviare al plugin di flash e quindi si deve cliccare una volta per attivare il contenuto del filmato.
Quando un’anteprima con lightbox viene chiusa, se clicco su un’altra immagine si apre senza errori…
Oleg
23 Maggio 2007 alle 18:07 pm
Buono! C’è un esempio del codice anche sul sito http://www.easybit.it nella parte lab…Il primo ha usare questo metodo per focalizzare l’attenzione sulle foto è stato il fotograco canadese Jeff Wall…c’è un errore di grammatica
Julius
23 Maggio 2007 alle 20:06 pm
@Oleg grazie per la segnalazione ^^
un saluto
FuzyNoel
25 Maggio 2007 alle 16:22 pm
Julius come faccio per mettere i pulsanti per andare avanti e dietro tra le varie foto?!?grazie anticipatamente!
Trazaman
1 Giugno 2007 alle 2:45 am
Ciao, volevo sapere se c’è la possibilità di usare lo stesso effetto e fare in modo che il caricamento della foto non avvenga così di botto ma magari con una animazione…grazie e ciao!
Julius
1 Giugno 2007 alle 9:22 am
@Trazaman ciao l’effetto Lightbox è proprio questo…ora non so dirti se esiste un effetto aggiuntivo.
Lo potresti simulare strutturandolo completamente in flash
un saluto
Dino
6 Agosto 2007 alle 12:47 pm
Ciaoo Julius.
Mi piace molto questo articolo sull’integrazione Flash e Lightbox. Mi sai dire se è possibile in qualche modo anziche delle immagini aprire un file html con il medesimo effetto partendo da un file flash.
Grazie.
Dino
Julius
6 Agosto 2007 alle 14:15 pm
La soluzione potrebbe essere questa: LightWindow v2.0
Sto cercando di capire quale comando dare tramite AS
vi faccio sapere
Dino
12 Agosto 2007 alle 17:03 pm
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
Julius
12 Agosto 2007 alle 19:14 pm
Bravissimo Dino
e grazie per averlo scritto nei commenti
thanks so much
Antomerit
29 Agosto 2007 alle 17:54 pm
Ciao Julius complimeti per il blog veramente bello !!!senti io ho problema ho creato una gallery in flash per il mio sito in flash ed ho messo in aggiunta alla gallery la lightbox in questo sito (www.espressioni1990.it/home.htm cat: “chiese” bouquet” etc etc ) solo che ogni volta che devo aggiunger le foto devo fare un casino devo aggiungere prima la foto nella gallery e poi aggiungere anche l’indirizzo in html ti vorrei chiedere posso modificare in qualche modo la gallery inserendo ogni singola img tramite xml senza dover stare ogni volta ad entrare agg etcetc ..ancora il sito nn è finito ti spiego io sn alle prime armi !!! Ps sei vuoi ti invio la gallery per renderti conto della gallery poi l’html lo puoi vedere anche sull’html della home …grazie mille Anto
Lisa
30 Agosto 2007 alle 11:12 am
Salve, i miei complimenti, interessantissimo BLog!
Vorrei farvi una domanda…
ma se voglio far aprire una file Html, non da un flash ma da una pagina Html?
Grazie Saluti
Lisa
Julius
30 Agosto 2007 alle 16:42 pm
@Antomerit ciao,
sta a te decidere se è necessario usare qualcosa di dinamico…se tu sai che le immagini cambieranno sempre o ce ne saranno sempre di più ti conviene rendere il tutto dinamico, invece se le immagini sono un numero finto tipo 30 puoi anche metterle a manina…
@Lisa ciao,
se ho capito bene vuoi aprire una pagina html da un’altra pagina html? ho capito bene? in tal caso leggi Collegamenti
Antomerit
30 Agosto 2007 alle 17:59 pm
Ciao Julius grazie per la risposta celere , mi piacerebbe fare un qls di dinamico visto che le creazioni fotografiche che mi dà sn in continua evoluzione , te ne sarei grato se mi potresti indicare la strada per la creazione di un qls di dinamico visto che io sn “TABULA RASA” …
GRAZIE
ANTONIO
Lisa
31 Agosto 2007 alle 10:42 am
CREDO DI ESSERMI SPIEGATA MALE!
Sto cercando un qualche cosa di simile (compatibile) al LightBox o una patch di questo, che mi dia la possibilità di aprire da una pagina Html, un file Html (anzichè immagini) mantenendo l’effetto di trasparenza sullo sfondo.
{spero vivamente di essere stata un pochino più chiara!}
GRAZIE!
LISA
Julius
31 Agosto 2007 alle 17:38 pm
@Lisa ecco qui LightWindow
marko
16 Settembre 2007 alle 1:10 am
ciao julius…..utilissimo questo effetto light box….. solo che ho un problema… non funziona….cioè ho rifatto il tuo esempio e mi funziona… inserito in un sito (per quanto sia facile ) non va….
Praticamtne il tutto è strutturato cosi’… ho un movie clip…al suo interno vi è il pulsante con ovviamente il seguente codice
on (press, release) {
getURL(”javascript:flashLightbox(’image.jpg’);”);
}
naturalmente i miei file ed i tuoi sono tutti insieme…. ma non va….
cosa puo’ essere?
thanks
Julius
16 Settembre 2007 alle 10:31 am
Ti da qualche errore nella pagina??
Controlla bene di avere tutti i file js caricati correttamente nei percorsi scritti nella pagina html
ciao
SPiKE
19 Settembre 2007 alle 23:01 pm
ciao julius!
io ho un problema se utilizzo il lightbox per più immagini nella stessa pagina!
praticamente ho inserito in una pagina html 4-5 foto (bottoni swf per poter creare il lightbox come spiegato da te..)
nel codice della pagina ho copiato-incollato la stringa che mi serve per creare l’effetto light-box,cambiando solo il nome del link pulsante..
l’effetto funziona..però l’immagine che si forma dall’effetto..rimane sotto i pulsanti swf…:|
come faccio a metterla “davanti”??
Julius
20 Settembre 2007 alle 9:56 am
Rimane sotto? Che codice di pubblicazione hai usato per i pulsanti in flash?
SPiKE
20 Settembre 2007 alle 20:16 pm
li ho fatti con flash 8!quindi li ho pubblicati come flash8.
nei pulsanti ho messo
on(release) {
getURL(”javascript:flashLightbox(’image1.jpg’);”);
}
cambiando il nome dell’immagine ad ogni pulsante,ovviamente;
e nel file html ho aggiunto
ecc..
e poi
var so = new SWFObject(”img01.swf”, “mymovie”, “150″, “100″, “6″, “#FFFFFF”);
tanti quanti sono i miei swf
(ah..una cosa…quel 6 a cosa si riferisce?)
SPiKE
20 Settembre 2007 alle 20:18 pm
mi ha preso il codice a href…!!
cmq lo riscrivo qui:
nel file html ho aggiunto
a_href= javascript:flashLightbox(’image1.jpg’);
a_href= javascript:flashLightbox(’image2.jpg’);
ecc..
Manu
1 Ottobre 2007 alle 11:03 am
ciao julius!sorry…ma…ho un problema…..
io ho un file swf in una pagina html.
in questo file swf ad un certo punto sul livello 1 ho fatto comparire l’immagine.
se il file si chiama prova.swf….per richiamare la lightbox, gli ho dato il seguente percorso per fare in modo che sia tutto in ordine e nn ci siano conflitti con gli altri scripts…
Script che ho dato per richiamare l’swf sul livello 1:
loadMovieNum(”newseffetto/button.swf”, 1);
Puoi vedere qui:
http://iceangel2006.altervista.org/
in poche parole compare l’immagine, ma al click nn succede nulla.
Dentro il server ci sono i seguenti file:
-prova.swf
-index.html
-CARTELLA: newseffetto/ con dentro tutti i file che ci sono nel sorgente tuo originale
ALtra cosa…..appena scaricato il tuo file, sia che apro l’swf che l’html, qnd clicco sull’immagine, nn vedo nessun effetto..mi da un errore…come mai?
ciao e grasie! ;-p
emanuele
1 Ottobre 2007 alle 15:51 pm
ciao Julius
ho un problema…
strano, chi non ne ha!!
comunque
l’effetto lightbox è una figata…
ho fatto varie prove e questa versione funziona benissimo, il problema è sorto quando ho provato la versione 2.0..
Non riesco a far comunicare al mio pulsante in flash il comando per aprire l’immagine grazie a java…
per caso puoi aiutarmi?
grazie anticipatamente
Didi
7 Ottobre 2007 alle 5:21 am
Ciao julius. riesco a richiamare lightbox da flash senza problemi ma con una singola immagine. Se invece volessi richiamare un image set di lightbox da un pulsante che script devvo assegnargli? è possibile? Grazie
lauryn77
9 Ottobre 2007 alle 11:54 am
Mi accodo alla domanda di Didi, ho letto tutti i commenti ma non c’è risposta.
se vogliamo usare la image set c’è un particolare script da aggiungere?
grazie mille
paoloconti
9 Ottobre 2007 alle 12:47 pm
Ciao Julius volevo sapere se c’era modo di eliminare la cornice bianca.
Ti prego rispondimi al più presto!!
Grazie mille
Julius
9 Ottobre 2007 alle 15:07 pm
@lauryn77,didi non ho trovato ancora lo script appena lo trovo lo inserisco nell’articolo
@paoloconti Non saprei ma penso di si…guarda un po il css e il file Javascript, sinceramente non ti so dire perchè non ho mai avuto l’esigenza di eliminare la cornice…
lauryn77
9 Ottobre 2007 alle 15:55 pm
capito, grazie! nel frattempo se dovessi imbattermi nella soluzione la suggerisco su questo post.
a presto!
flashmotus
17 Ottobre 2007 alle 0:09 am
sempre più utili le risorse che metti a disposizione degli utenti. Conosco il tool lightbox da un pò e l’ho utilizzato solo in pagine html, faccio una ricerca lightbox flash su google ed eccomi di nuovo qua.
Julius
17 Ottobre 2007 alle 9:11 am
emanuele
18 Ottobre 2007 alle 16:46 pm
niente per la versione 2.o? sigh
lightwindow e flash - Forum Flash CS3
3 Dicembre 2007 alle 12:47 pm
[...] lightwindow e flash Ho trovato un esempio su ci
Alan Curtis
4 Dicembre 2007 alle 13:31 pm
Salve a tutti!
riguardo al tema flash + lightbox 2, vi invito a leggere il mio tutorial per fare questa integrazione e vedere le gallerie di immagini in lightbox richiamate da flash! Era un problema che ho avuto su un sito che ho fatto quest’anno, cosi’ me lo sono risolto da solo facendo questo piccolo adattamento:
flash lightbox v2
Buon lavoro a tutti!
Julius
4 Dicembre 2007 alle 13:37 pm
Ottimo lo inserisco come link a fine articolo
f3d3r1c0
31 Marzo 2008 alle 9:56 am
ciao a tutti…
inanzitutto complimenti julius per il blog, semplicemente fantastico…
io vorrei produrre un effetto lightbox in flash, ho gia visto i tutorial, ma non si addicono al mio problema…
sto creando un cd interattivo, interamente in flash(quindi creando i file di presentazione flash), e vorrei sapere se è possibile non utilizzare file html…
ovvero, il codice che si mette all’interno dell’html: css, js, ecc sarebbe possibile inserirlo direttamnte in flash???
grazie…
f3d3r1c0
Julius
31 Marzo 2008 alle 19:13 pm
Ciao in teoria puoi creare in flash qualcosa che assomigli all’effetto light box…
avevo in mente anche di farci un piccolo tutorial..
comunque l’idea è questa
creare un clip filmato trasparente sul nero che venga usato come contenitore delle foto, ogni qual volta viene cliccata una foto verrà caricata nel clip contenutitore con sfondo sul nero trasparente…
francesco
3 Aprile 2008 alle 0:24 am
Ciao,
Tutto va nl pagina che c’è negli esempi(anche aggiungendo + foto))!
Xo ,io ho una pagina html e dovrei inserire l’effetto DENTRo a questa pagina!
E non mi riesce!
Come faccio?!
Ho provato a copiare il codice di una pagina nell’altra ,ma niente!!:-(
Marcello
3 Maggio 2008 alle 3:50 am
Recentemente ho sviluppato un effetto Lightbox interamente in ActionScript. Per il momento offre l’essenziale ma conto di includere nuove funzionalità in futuro.
http://www.marcellosurdi.name/2008/04/14/lightbox-con-flash/
Fatemi sapere che ne pensate.
Julius
3 Maggio 2008 alle 14:16 pm
@Marcello ottimo esempio!
Ti scrivo un articolo su JD!
saluti
Marcello
4 Maggio 2008 alle 15:37 pm
@Julius
Grazie mille!
Ciao
Fedeweb
12 Maggio 2008 alle 14:39 pm
[...] Flash e thickbox [...]
fabrizio
14 Maggio 2008 alle 11:38 am
Ciao Julius, ancora una volta complimenti sinceri. Volevo chiederti una cosa:
ho notato che tutto funziona perfettamente in locale, ma se lo carico su un server, quando la pagina html viene caricata non parte l’swf e il bowser da l’errore: -’SWFObject’ non è definito-
Cosa può essere, se in locale invece tutto funziona a meraviglia?
Grazie.
Fabrizio
Marchino
14 Maggio 2008 alle 11:43 am
Controlla di aver caricato tutti i file JS necessari…compreso quello per l’SWFObject
fabrizio
14 Maggio 2008 alle 12:03 pm
Ciao Marchino ho caricato tutto, infatti se dall’ftp riscarico tutto in locale, funziona perfettamente.
Cosa può essere?
Marchino
14 Maggio 2008 alle 12:28 pm
Hai un link da poter vedere?
fabrizio
14 Maggio 2008 alle 12:38 pm
marchino dammi il tuo indirizzo email:
info@fabriziozampetti.com
Julius
14 Maggio 2008 alle 20:21 pm
@Fabrizio ciao controlla di aver caricato tutto correttamente come dice marchino
fabrizio
15 Maggio 2008 alle 12:33 pm
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
fra
3 Giugno 2008 alle 21:50 pm
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?:-)
Julius
4 Giugno 2008 alle 19:25 pm
Il lightbox funziona cosi di solito, altrimenti si deve cambiare le impostazioni del file JS con un close
Trappagfx
4 Luglio 2008 alle 12:27 pm
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
boh
11 Luglio 2008 alle 22:08 pm
Il codice ke rikiama lightbox.js e lightbox.css, da inserire nella pagina html, quale è precisamente?Grazie
Julius
11 Luglio 2008 alle 22:21 pm
@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
luigi
12 Luglio 2008 alle 19:05 pm
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
Scrivi un Commento
tag abilitati: <code> </code> | <a href=""> </a> | <strong> </strong> | <i> </i>