Tutorial Flash e Lightview: Realizzare una galleria di immagini
Ecco un altro bell’articolo preso dal passato, dove imparerai a costruire una galleria in flash sfruttando lo script lightview per visualizzare le immagini con effetti speciali. Buona lettura! 
Una delle caratteristiche dello script lightview è la possibilità di raggruppare delle immagini in base a una categoria e poterle vedere in sequenza tramite uno slideshow.
Per ottenere questo da una gallery fatta in flash, dovete procedere come segue.
A ogni miniatura, convertita in un pulsante, assegnate il seguente codice:
on (release) {
getURL(“javascript:Lightview.show(’1′);”);
}
Se avete 10 miniature, l’ultima avrà il numero 10, al posto dell’1.
Poi nella pagina html, che contiene il filmato swf, scrivete il seguente codice:
<div class=”invisible”>
<a href=’image1.jpg’ id=’1′ class=’lightview’ rel=’gallery[natura]‘>1</a>
<a href=’image2.jpg’ id=’2′ class=’lightview’ rel=’gallery[natura]‘>2</a>
<a href=’image3.jpg’ id=’3′ class=’lightview’ rel=’gallery[natura]‘>3</a>
</div>
In pratica inserite un div, nel quale mettete le immagini che saranno presenti nella gallery in flash, assegnando a ciascuna un id e la categoria (rel) che deve essere uguale per tutte (gallery[natura]).
Nel foglio di stile css associato alla pagina dovrete fare in modo di non visualizzare il div “invisibile”, in questo modo:
.invisibile {
display:none;
}
L’installazione dello script lightview e tutto il resto, sono spiegati nell’articolo flash e lighview.
E non dimenticarti di restare aggiornato abbonandoti gratis ai 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!
Articoli simili che potrebbero interessarti
Ciao, mi chiamo Federico Pian e lo scopo di questo blog è condividere con te la mia passione per la grafica e il web design.
ciao gran bel tutorial, solo che non riesco a scaricarlo.
cosa devo fare??
a presto..
ciao!
Ciao, per scaricare basta che ti metti sopra il link “scarica il sorgente” e quando compare la finestra “snap shots” premi su “Click for .zip file”
Ciao a tutti ed in particolare a Federico, che mi da la possibilita’ di fare una domanda riguardo Lighview.
E’ qualche giorno che provo questo script prelevato da Nick Stakenburg
Premetto che ho lavorato sempre in ASP ma visto la galleria immagini di bella fattura ho voluto provarla.
In realta’ uso questo script per inserire dei form all’interno…
Ma ahime’ non riesco a trovare il modo di chiudere la finestra Lighview in modo automatico senza premere sul link CLOSE.
Mi sono documentato e ho cercato di capire la funzione window.observe() ma funziona solo per le gallerie immagini. E’ possibile sapere qual’e’ la funzione che innesca l’evento lighview.close().
Grazie
Ciao, cosa intendi “in modo automatico”? premere in una “parte vuota” dello schermo in modo che si chiuda la finestra?
Se è così le finestre si chiudono…
…allora ti spiego..
Immagina di avere una pagina con un form che richiama un’altra pagina…
Es.
Form cognome nome ecc. ecc. che in base a delle condizioni puo’ richiamare 2 pagine esempio ok.tml e errore .html
Gestita con lightview e’ semplice:
a href=’/email/contatto.htm’ id=’contatto’ rel=’iframe’ class=’lightview’ title=’Richiesta Informazioni :: :: topclose: true, width: 800, height: 600 ‘ >contatti</a
Ma quando il form richiama le due possibili pagine… vorrei un qualcosa che chiude auomaticamene la pagina senza cliccare fuori della finestra o nel link CLOSE.
Nick stankenburg dice di utilizzare Lightview.hide()…..
L’ho provato ma…. non funziona
Ciao, scusami cosa devo fare per far funzionare questo effetto sia su Firefox che IExplorer? Appena apro questo effetto su internet explorer il broswer si blocca e non mi fa vedere questo effeto.. cosa devo fare?
@alessandro: bisognerebbe studiarsi lightview per riuscire a ottenere l’effetto che tu dici. In generale per chiudere una finestra popup in automatico basta mettere questo codice:
setTimeout(‘window.close()’,3000);
Con lightview sarebbe da studiare la cosa…
@max: a me con internet explorer funziona…gli altri hanno riscontrato dei problemi con IE?
Ciao! ho usato lightview x una gallery fatta in flash seguendo le tue preziose istruzioni, funziona ma si apre in una nuova finestra non riesco ad aprirla in una lightview con sfondo trasparente…in modo che in secondo piano rimanga il sito di partenza…. Non so se sono riuscita a spiegarmi…. Grazie!!!
Ciao, non ho ben capito il tuo problema…se vuoi puoi mandarmi per e mail quello che hai fatto così provo a capire meglio cosa c’è che non va..
SCUSAA..mi sono spiegata malissimo:
la mia lightview con le immagini aperta non ha come background il sito da cui la “lancio”..come faccio ad impostare una trasparenza…in modo che in secondo piano rimanga il sito di partenza… :-S e poi… è normale che con IE si blocchi??
Grazie x la tua pazienza!!
Ciao, anch’io ho cercato delle soluzioni in merito al fatto che il sito in secondo piano sparisca, ma non ho trovato nulla.
E comunque secondo me non è un grosso problema…tanto l’attenzione deve andare sulla lightview e non su quello che c’è dietro.
Per quanto riguarda IE io non ho nessun problema…in che senso si blocca?
nel senso che non riesce neanche a caricare la lightview!!! addirittura ho dovuto riavviare il pc in un’occasione….
che internet explorer hai? perchè io l’ho provato su IE 6 e funziona, magari su IE 7 ha dei problemi…
Io uso la versione 7 di IE ho provato in diversi pc e il problema è sempre lo stesso… a me funziona solo con FireFox 3…
??
Per chi ha problemi con internet explorer, provate a scaricare l’ultima versione di lightview, la 2.3 da qui..purtroppo, non avendo IE 7 non posso provarlo.
ho provato la versione 2.3 del lightview purtroppo ancora fa lo stesso problema…
Forse ho trovato la soluzione; in cima alla pagina metti il doctype, tramite questo codice:
Mi raccomando, mettilo sopra tutto il codice..dimmi se funziona, così ricarico anche i sorgenti..
Perfetto!!! Ora funziona!
Ho inserito il seguente codice sopra tutto il codice presente nella pagina html come hai dettu tu:
Grazie 1000 per l’aiuto!!!
Scusate, il lightview non dovrebbe aprire le immagini nelle sue dimensioni orginali?? perchè io ho un’immagine dalle dimensioni 450×800 e quando il lightview la carica la fa vedere in dimensioni ridotte come mai?
cosa devo modificare per far si che mi apre le immagini nelle loro dimensioni originali??
Prova a controllare il codice in flash…
on (release) {
getURL(”javascript:Lightview.show({ href: ‘http://fedeweb.wordpress.com’, rel: ‘iframe’, title: ‘quello_che_vuoi’, options: { width: 800, height: 500 }});”);
}
Se in options hai settato delle misure l’immagine verrà mostrata appunto in quelle dimensioni…prova a togliere quello che c’è da options in poi, stando ovviamente attento alle graffe ecc.
nel codice in flash ho solamente inserito:
on (release) {
getURL(“javascript:Lightview.show(’1′);”);
}
mentre nel file .html ho messo questo:
1
non c’è nessuna “options”, credo che il codice da modificare sia il javascript: lightview.js, ma nn so dove mettere le mani.
Mi ridimensiona tutte le immagini facendoli entrare tutti nella schermata del broswer, senza far uscire le scrollbar, quindi avendo delle immagini con delle dimensioni più grandi delle schermate del broswer automaticamente me li rimpicciolisce.
sory ^_^! non esce il codice html:
a href=’../image.jpg’ id=’1′ class=’lightview’ rel=’gallery[nome]‘> 1 /a
Prova a mandarmi il codice per e mail che gli do un’occhiata…
Scusami l’indirizzo e-mail qual’è? ^_^?
federico.pian@gmail.com
alcuni problemi con ie7 e lightview possono essere risolti usando il codice base di adobe flash (per intenderci quello che viene generato quando si fa la pubblicazione)
ciao e complimenti per il tutorial!
funziona bene su ie firefox e anche su safari per windows!
ci sarebbe però sempre quel problemino che gli swf di sfondo spariscono quando si apre il lightview!?
se ci potesse essere una soluzione per rendere lo sfondo trasparente anche per gli swf sarebbe perfetto!?!?
grazie
Ciao! eh lo so..purtroppo non ho ancora trovato delle soluzioni in merito..ma secondo me non è un grosso problema: tanto l’attenzione deve cadere su lightview e non su quello che c’è sotto..appena troverò una soluzione la pubblicherò nel blog!
ciao, ehm premetto che nn sono molto esperto di javascript e di as, pero nn so potrebbe aiutarti il fatto che seguendo il tutorial di alan curtis c’era lo stesso problema e nel codice javascript andava //commentato diciamo cosi una riga di codice dove c’era scritto hide flash e show flash dopodichè gli swf nn sparivano più..
ora probabilmente nella mia ignoranza posso anche aver scritto una cavolata, però boh potrebbe anche essere una strada..
cmq ancora grazie per l’aiuto!
Salve ragazzi,
ho provato la lightbox e l’ho trovata eccezionale!
Ma sul fatto che sia in vendita che ne pensate?
Sul sito dell’autore: http://www.nickstakenburg.com/ c’è scritto che per uso commerciale si devono pagare 300euro per aver la licenza.
Ma provando la versione TRIAL che lui rilascia già funziona tutto.
Che dite?
Ciao! allora praticamente devi pagare una licenza in base all’uso che vuoi fare di lightview.
Quando scarichi lightview è già nella versione completa, solamente che se poi vuoi usarlo per qualche progetto devi pagare una licenza..
grazie per la fantastica risorsa condivisa!!!!
a me funziona tutto con as3 ma resta irrisolto il problema della trasparenza degli oggetti flash.
ci sono novitò? qualcuno ha trovato la soluzione?
pare anche che non funzioni con ie8…
Ciao! Ho realizzato un mio progettino utilizzando l’esempio. Volevo sapere cosa sbaglio dal momento che in locale mi funziona perfettamente mentre una volta caricato in rete non mi apre le immagini!!!
Come posso fare?
Grazie
Ciao
Ciao, prova a mettere il link al progettino, così vedo qual è effettivamente il problema
Ciao http://www.muditaservice.net/flash-gallery/index.html
Grazie mille!!!
Controlla dove hai caricato le immagini che l’errore è dovuto a quello. Per come hai messo tu i collegamenti, le immagini devono stare insieme alla pagina index.
Come faccio ad aprire una pagina al caricamento del sito con questo sistema? Grazie 1000
Ciao Patrizia e benvenuta nel blog
cosa intendi esattamente? fare in modo che si apra prima della pagina una finestra stile lightbox? In questo caso ecco un articolo (in inglese) dove è spiegato come ottenere l’effetto che penso tu intenda.
Ciao Fede,
grazie 1000 per il benvenuto.. scusa non mi sono presentata..
Quello che intendo è quello che dici.. vado a dare un’occhiata.. grazie 1000!!!!!
Ciao Fede
Grazie per il consiglio. Volevo chiederti se è possibile utilizzare lightview con Flippage.
Se possibile avresti un esempio da farmi vedere?
Grazie ancora
Ciao Davide e benvenuto nel blog
Quale versione intendi? per caso questa?
Grazie Fede.
ti allego il link del mio progetto alla pagina dello sviluppo dell’azienda pagina di dx vedrai che puoi cliccare sotto i titolo dei grafici e aprire una pagina secondaria. Ecco io vorrei che il grafico con la sua spiega si possano visualizzare con il il lightview.
Crei sia possibile farlo e se si la stessa cosa vele anche per i video delle pagine successive?
Grazie per la disponibilità
Buona Giornata
http://www.muditaservice.net/transito/CaseHistory-MuditaService/index.html
al momento è molto lento!!!
Eh purtroppo non potendo avere per mano il sorgente mi è difficile aiutarti..
Ciao FEDE
Grazie per la tua disponibilità ti ho inviato via mail il link dove poter scaricare le sorgenti.
Ancora grazie