Lightbox è sicuramente uno dei effetti javascript che hanno riscosso più successo negli ultimi anni, molto probabilmente vi ci sarete imbattuti più volte. Le immagini vengono aperte in primo piano mentre la pagina in cui sono linkate resta in ombra sullo sfondo.
Per vederlo all'opera potete dare un'occhiata a questo esempio primaverile (cliccate sulla foto).
Ecco le istruzioni per integrare Lightbox 2.04 nel nostro blog.
Modificare il template
1. Andare in Layout ▶ Modifica HTML2. Come sempre è bene creare un backup del template prima di modificarlo, clicchiamo quindi su Scarica modello completo.
3. Cerchiamo il tag </head> e immediatamente sopra copiamo questo frammento di codice
<link href="http://www.virtuosomaster.com/tutorials/samples/lightbox/css/lightbox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/prototype.js" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/lightbox.js" type="text/javascript"/>
Applicare l'effetto
1. Creiamo un post di prova e carichiamo un'immagine normalmente2. Quando l'immagine è stata caricata, apriamo il nostro post in Modifica Html
3. Sostituiamo la prima parte sottolineata con la stringa rel="lightbox". La seconda parte s1600-h deve invece diventare s1600. Ecco un'immagine del risultato che dobbiamo ottenere.
4. Pubblichiamo il nostro post e verifichiamo che tutto funzioni
Rifiniture
Con Lightbox possiamo mostrare le immagini in sequenza (slideshow) molto semplicemente, invece del semplice rel="lightbox" dovremo scrivere per ciascuna immagine rel="lightbox[nomesequenza]" con il nome che abbiamo scelto tra parentesi quadre.Se invece vogliamo visualizzare un titolo per le nostre immagini dobbiamo usare una stringa simile a questa rel="lightbox" title="Titolo di prova".
Considerazioni finali e link
Personalmente trovo l'effetto molto piacevole, ma non è detto che si adatti bene a qualsiasi blog. Un'altra considerazione da fare è che qualsiasi aggiunta di codice al nostro sito comporterà un, più o meno sensibile, rallentamento nel caricamento delle pagine.Il sito ufficiale di Lighbox 2 è questo.
Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille!
Puoi votare le mie notizie anche in questa pagina.
Puoi votare le mie notizie anche in questa pagina.
25 commenti:
CIAO COMPLIMETI PER IL POST!
AVEVO PROVATO QUELLO DI CREARE BLOG,MA NON FUNZIONAVA! IL TUO TUTTO OK, TRANNE CHE SE VOGLIO VISUALIZZARE PIU' FOTO COME SEQUENZA MI FA VEDERE ANCHE QUELLI DEGLI ALTRI POST SUCCESSIVI! COME POSSO FARE PER VISUALIZZARE LE FOTO DI UN POST ALLA VOLTA?
P.S. IO USO WINDOWS LIVE WRITER COME SPIEGA CREARE PER INSERIRE TITOLI E LINK. POI DAL SITO UFFICIALE HO INSERITO A MANO "lightbox[roadtrip]" IN OGNI FOTO, COSI FACENDO SI OTTINE LA SEQUENZA, MA ANCHE DEGLI ALTRI POST PURTROPPO! MI PUOI AIUTARE?
GRAZIE!
Ciao, credo di aver capito qual è il tuo problema. La soluzione è semplicemente dare un nome diverso a ciascuna galleria. Ad es. in un post avrai rel="lightbox[galleria1]" e in un altro avrai rel="lightbox[altragalleria]".
Fammi sapere.
ciao
grazie 1000 ci son riuscito! ma adesso il problema piu' grande e' IE7! ormai ho preso l'abitudine di testare le modifiche sempre con IE7, visto le sorprese che ho avuto con blogumus e vari altri modifiche!in pratica mi da errore di visualizzazione della pagina, a volte non mi fa neanche aprire la pagina , a volte invece funziona tutto benissimo! per adesso sto provando sul blog di prova, ed sinceramente ho paura a passare le modifiche in quello ufficiale!anche perche ho qualcosa come 300 immagini da passare! cosa mi consigli?
grazie
ciao
Bella domanda... Allora, anzitutto una premessa: per quanto mi riguarda sono anni ormai che non uso più Explorer e mi trovo decisamente bene così... Ciò detto come tu stesso scrivi i problemi che hai evidenziato sembrano manifestarsi in modo molto casuale. Le uniche prove che ho fatto io sono andate a buon fine. L'unica cosa che mi sento di consigliarti è di non modificare tutte le immagini subito. Prova a iniziare solo con qualche nuovo post, e a vedere che cosa succede. In questo modo anche il ripristino della configurazione precedente sarà più semplice.
Facci sapere...
ciao
si anch'io non uso IE7 da molto tempo! ma se non ricordo male.. IE7 è ancora il browser in assoluto piu' usato al mondo, quindi mi darebbee fastidio perdere visitatori per questo motivo!intanto continuo a testare con il blog di prova pubblicando widget e post! poi vediamo se passare tutto in quello ufficiale! grazie! comunque con firefox funziona tutto alla grande! ciao spyke
ciao mi sono deciso! ho riportato la modifica sul blog, se vuoi darci un occhio? mi fa solo piacere! una cosa volevo chiederti, si puo' limitare la grandezza delle foto? mi spiego, in un post ho messo delle foto molto grandi come risuluzione, quindi quando si apre lightbox si perde l'effetto della foto perche troppo grande! grazie
spyke
Ottimo. Carino il blog.
Per quanto riguarda le dimensioni delle foto, Lightbox non effettua alcun ridimensionamento automatico. Credo che la strada più semplice sia quella di ridimensionare l'immagine prima di caricarla. In alternativa si potrebbe provare qualche clone/evoluzione di Lightbox, mi sembra di averne intravisto qualcuno che fa quello che ti serve. Purtroppo non ho ancora avuto modo di testarlo.
Ciao,
grazi eper il tutorial. Io l'ho usato per verificare se l'inserimento fatto dilightbox nel mio Blog fosse corretto. Infatti, anche con i tuoi codici, ottengo solo una pagina incasinata. Se vuoi darci un'occhiata...non capisco come mai.
Grazie!
http://cibellieguadagnotest.blogspot.com/
Ho l'impressione che tu inserisca il codice che andrebbe inserito nel singolo post nel template. Il problema potrebbe essere quello.
Con gli elementi che ho non riesco a dirti altro.
@Nicolò
Direi che hai risolto da solo :-)
Complimenti per le belle foto.
semplice e perfetto, grazie mille!!
ti seguiremo e approfondiremo tutti i contenuti di questo blog very cool!!
Thanks
@ANIMAZ studio
Mi sembrano ottimi propositi ;)
Complimenti per le vostre bellissime illustrazioni/animazioni!
Ciao!
Bellissimo Post, molto semplice e chiaro da seguire, specialmente per gli inesperti come me.
Un' unica domanda: è possibile avere la presentazione litebox di tutte le foto del poost cliccando solo sulla prima nella presentazione in prima pagina? quello che succede in pratica è che lo slide si attiva solo se entro nel post!
grazie
Antonio
Con questa versione di Lightbox non è possibile. Ciao.
Grazie della semplice spiegazione sopratutto a gente come me che comincia.Una domanda,e' possibile pubblicare una sola foto in un dato post per poi cliccarci sopra e far partire uno slide di varie foto?
@Maurizio
Potrebbe essere possibile (mi spiace davvero tanto ma non ho tempo di provarlo), dovresti nascondere le foto successive alla prima e mantenere comunque i riferimenti a Lightbox...
Scusate ma non ho ancora capito come inserire il mio blog nel database di google.E possibile anche inserie tag per avere una ricerca piu' ampia?
@Maurizio
Google cerca di inserire qualsiasi contenuto nelle sue ricerche, quindi anche il tuo blog.
Se però vuoi conoscere i dettagli dello stato di indicizzazione ti consiglio di usare gli Strumenti per Webmaster.
Ciao.
Ciao, io ho provato a integrare lightbox e funziona ma inserendolo poi spariscono i lettori fissi dalla sidebar. da cosa può dipendere?
(http://batumarti.blogspot.com)
Mille grazie. Con il tuo chiarissimo post finalmente sono riuscito a inserire Lightbox!
Il mio blog è: http://www.beatstonemarine.com
Ti faccio un'altra domanda: sai come si possano fare degli slideshow con Lightbox che partano da un unico thumbnail?
Grazie mille per il prezioso consiglio. Finalmente lightbox mi funziona alla grande.
Complimenti anche per il sito, sempre utilissimo.
Grazie.
ho appena finito di aggiornare tutti i post (fortunatamente da poco ho aperto il blog) è troppo feego con la (o il?) lightbox! XD
grazie!
@pcna
Anche il tuo blog è troppo feeego! :)
ciao, perche sul mio blog non funziona? non sono una nuova per quanto riguarda i codici html ma ne capisco un bel po
Posta un commento