Pubblicato da: fedeweb | maggio 17, 2008

Flash e lightview (galleria di immagini)

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.

lighview-gallery

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.

Guarda la demo

Scarica il sorgente

Scarica il sorgente AS3

Annunci

Responses

  1. ciao gran bel tutorial, solo che non riesco a scaricarlo.
    cosa devo fare??
    a presto..
    ciao!

  2. 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”

  3. 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

  4. 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…

  5. …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

  6. 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?

  7. @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?

  8. 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!!!

  9. 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..

  10. 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!!

  11. 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?

  12. nel senso che non riesce neanche a caricare la lightview!!! addirittura ho dovuto riavviare il pc in un’occasione….

  13. che internet explorer hai? perchè io l’ho provato su IE 6 e funziona, magari su IE 7 ha dei problemi…

  14. 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… :???

  15. 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.

  16. ho provato la versione 2.3 del lightview purtroppo ancora fa lo stesso problema… 😦

  17. 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..

  18. 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!!! 😀

  19. 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?

  20. cosa devo modificare per far si che mi apre le immagini nelle loro dimensioni originali??

  21. Prova a controllare il codice in flash…

    on (release) {
    getURL(”javascript:Lightview.show({ href: ‘https://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.

  22. 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. 😦

  23. sory ^_^! non esce il codice html:

    a href=’../image.jpg’ id=’1′ class=’lightview’ rel=’gallery[nome]’> 1 /a

  24. Prova a mandarmi il codice per e mail che gli do un’occhiata…

  25. Scusami l’indirizzo e-mail qual’è? ^_^?

  26. federico.pian@gmail.com

  27. 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)

  28. 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

  29. 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!

  30. 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!

  31. 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?

  32. 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..

  33. 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…


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: