LightWindow 2: animazioni ed effetti grafici per aprire modal window
photo credit: combust
Lightwindow utilizza Scriptaculous e Prototype per associare trasparenze e animazioni all’apertura di una finestra. Con un semplice link, possiamo visualizzare all’interno di un box (modal window) risorse come pdf, video, filmati youtube, swf e addirittura pagine web esterne.Una modal window è una finestra con la quale l’utente deve interagire per poter ritornare alla finestra madre. Si trovano diversi script che permettono di associare ad un semplice link l’apertura di modal window con una particolare animazione e picevoli effetti grafici.Se non hai capito di cosa sto parlando, clicca qui per favore (non funziona nel feed reader).Questo tipo di finestre sono molto utili quando si vuole fare riferimento a una risorsa specifica, come un’immagine, una galleria di immagini o un video, un contenuto multimediale, o anche un form (pensa al login form di technorati), piuttosto che ad una vera e propria pagina. Nei limitati casi in cui è logico, utile e corretto farlo, possiamo utilzzare una modal window anche per aprire delle pagine web esterne, senza che l’utente abbandoni la navigazione del nostro sito.Inserire questo tipo di effetto nel nostro sito è molto semplice. In questa piccola guida utilizzeremo Lightwindow 2 che sfrutta la potenza di due librerie come Scriptaculous e Prototype.Tutto il necessario è contenuto nel pacchetto lightwindow.zip .includiamo i file javascript e il foglio di stile all’interno delle pagine in cui vogliamo utilizzare lightwindow.
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script><script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />A questo punto ogni link della pagina potrebbe aprirsi in un box: sarà sufficiente impostare la classe “lightwindow” per il tag a:
<a href="URLdellaRISORSA" class="lightwindow">Link</a>Possiamo indicare una serie di parametri per personalizzare la finestra che andrà ad aprirsi. CAPTION e TITLE saranno a loro volta evidenziati nel box, che potrà avere la posizione sullo schermo, la larghezza e l’altezza che di volta in volta preferiamo. Per personalizzare ulteriormente l’aspetto grafico, è possibile comunque intervenire sul foglio di stile.Trovi tutti i dettagli sul sito dell’autore.
<a href="URLdellaRISORSA" class="lightwindow" title="un titolo per la finestra" caption="una breve descrizione"
params="lightwindow_width=516,lightwindow_height=530">Link</a>Lightwindow 2 permette di aprire in questo modo per esempio immagini, gallerie, pagine web, filmati quicktime, filmati youtube swf e file pdf.Grazie al plugin di Mockersubat, Lightwindow è utilizzabile senza troppi problemi anche su wordpress.
Una volta installato e attivato il plugin, potremo utilizzare anche in wordpress la classe lightwindow, nel modo che abbiamo appena visto, per tutti i nostri link.Puoi anche provare…
lightbox
shadowbox
… o leggere:modal window su wikipedia
[update 08-05-2008]
Nei commenti a questo post, Ciby, un utente che ha avuto problemi a far funzionare correttamente Lightwindow su iE, segnala un utile link al forum di Lightwindow: occhio al doctype e ai nomi dei div!
April 24th, 2008 at 4:58 pm
Ciao, sai se esiste un modo per far aprire una pagina statica o fluida su explorer utilizzando LightWindow2? tutto il resto (immagini, swf, pagine web…), lo apre, ma se richiami una pagina interna, no.
su firefox nessun problema, ma su explorer proprio non funziona… Ti risulta?
Grazie!
April 24th, 2008 at 5:47 pm
no in realtà non mi risultava… adesso do un’occhiata… grazie per la segnalazione comunque!
May 7th, 2008 at 10:10 am
Ho trovato! sul sito dell’autore per lo stesso problema è stato consigliato di aggiungere alle pagine html dove si usa lo script
e così le finestre si aprono correttamente anche con IE.
Spero non saltino fuori controindicazioni perchè attualmente testo solo con firefox e IE.
ciao, e grazie per l’ospitalità.
il tuo sito è diventato un mio punto di riferimento importante.
cyby
May 7th, 2008 at 10:13 am
!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
questa la stringa che prima non è stata visualizzata sul post precedente
)
May 7th, 2008 at 12:16 pm
Ciao Cyby grazie per i complimenti e il suggerimento…
ce la fai a postare il link alla pagina in cui hai trovato la soluzione?
May 8th, 2008 at 6:17 pm
eccolo:
http://discuss.stickmanlabs.com/forums/1/topics/875
ciao cyby
May 8th, 2008 at 6:21 pm
ottimo Ciby! addesso aggiorno anche il post… grazie.
July 14th, 2008 at 7:33 pm
Buongiorno a tutti. Volevo aggiungere che il plugin funziona perfettamente, ma c’è un problema: l’attributo ‘params’ rompe la validazione XHTML.
Per ora non ho trovato nessuna soluzione, ma se qualcuno ha delle idee…
July 24th, 2008 at 8:10 pm
Io continuo ad evere grossissimi problemi con IE sia su Windows che su Mac. Dopo aver ultimato 10 gallerie da 30/40 immagini l’una mi sono accorto che su IE l’effetto voluto non si attiva e l’immagine viene caricata in una pagina blank… ho cercato ovunque ma per ora nessuna soluzione suggerita ha portato alla soluzione del problema. Il tutto funziona perfettamnente sia con FF che con Safari!
March 28th, 2009 at 2:48 pm
ciao ho sistemato tutto, solo che non mi viene fuori lo sfondo, quindi la finestra si apre ma lasciando intatto lo sfondo con la pagina madre…
praticamente non si notano i comandi tipo “chiudi” e le caption… ho provato a controllare le immagini nella cartella images e nel css ma sembra tutto ok. cosa potrebbe essere?
io sto usando lo script per aprire delle pagine html
Link
May 5th, 2009 at 12:09 pm
Ciao,
e se si volesse far eseguire lo script, quindi far aprire una lightwindows al caricamento della pagina automaticamente invece che al click di un link?
Qualcuno ha qualche idea?
June 9th, 2009 at 3:41 pm
Ho usato tantissimo lightwindow per il mio sito web… riuscendo a farlo eseguire a partire da filmato flash, impostando i colori dell’aspetto rendendolo uniforme con la grafica del mio s ito…ma in IE non riesco a vedere le gallery correttamente. Mentre in FF si…
Il problema è il “retino” nero che appare come sfondo della gallery…Non viene infatti caricato…mentrre in FF no problems…
Forse nel css è necessario del codice apposito per aiutare IE a visualizzarlo??? strano però che l’autore non l’abbia già fatto…help!
November 24th, 2009 at 8:33 pm
Salve ragazzi, uso abbastanza spesso lightwindow per visualizzare video in flash e devo dire che non ho riscontrato quasi mai grossi problemi, tranne quello che ad oggi il retino grigio lo vedo bene con Firefox, mentre con IE7 si visualizza fino all’altezza massima della finestra, dopodichè se ho uno scroll in una pagina e scendo giù il retino rimane sopra. Con FF rimane sempre tutto visibile. Per rispondere ad alcuni dei problemi riscontrati da voi, vi consiglio sempre di ricontrollare i percorsi al css e ai tre javascript. Molte volte dipende proprio da questo, il fatto che si apre in una blank. Controllate bene i parametri che passate al tag href, (params e class) e vedrete che funziona tutto. Il sopra riportato va bene.
Di seguito un piccolo esempio di tag href corretto:
.
un saluto a tutti e se trovo altre soluzioni in giro per la rete vi terrò informati.
November 24th, 2009 at 8:36 pm
Non si è visualizzato l’esempio… provo quindi a rimetterlo:
..a href=”percorso_del_file.swf” class=”lightwindow page-options” params=”lightwindow_width=480,lightwindow_height=420″….
November 24th, 2009 at 9:24 pm
ho risolto il problema dello sfondo grigio che non copriva tutta la pagina scrollabile. L’errore stava nel mio div contenitore che era settato ad un’altezza fissa.. (nel mio caso era a 630px). E’ per questo che lo sfondo mi si visualizzava fino a quell’altezza, dopodichè rimaneva bianco. Ho tolto proprio la proprietà “height” e tutto è tornato a posto.
ciao a tutti
Stefano