venerdì 20 marzo 2009

Lightbox 2.04 per Blogger

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 HTML
2. 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"/>
Come nell'immagine seguente


Applicare l'effetto

1. Creiamo un post di prova e carichiamo un'immagine normalmente
2. 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.

25 commenti:

Spyke ha detto...

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!

hipst3r ha detto...

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.

Spyke ha detto...

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

hipst3r ha detto...

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

Spyke ha detto...

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

Spyke ha detto...

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

hipst3r ha detto...

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.

asci ha detto...

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/

hipst3r ha detto...

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ò ha detto...
Questo commento è stato eliminato dall'autore.
hipst3r ha detto...

@Nicolò

Direi che hai risolto da solo :-)
Complimenti per le belle foto.

ANIMAZ studio ha detto...

semplice e perfetto, grazie mille!!
ti seguiremo e approfondiremo tutti i contenuti di questo blog very cool!!
Thanks

hipst3r ha detto...

@ANIMAZ studio
Mi sembrano ottimi propositi ;)
Complimenti per le vostre bellissime illustrazioni/animazioni!

antonio mercurio ha detto...

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

hipst3r ha detto...

Con questa versione di Lightbox non è possibile. Ciao.

Vicarious ha detto...

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?

hipst3r ha detto...

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

Vicarious ha detto...

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?

hipst3r ha detto...

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

batu ha detto...

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)

Massimo ha detto...

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?

Giacomo Zanni ha detto...

Grazie mille per il prezioso consiglio. Finalmente lightbox mi funziona alla grande.
Complimenti anche per il sito, sempre utilissimo.
Grazie.

pcna ha detto...

ho appena finito di aggiornare tutti i post (fortunatamente da poco ho aperto il blog) è troppo feego con la (o il?) lightbox! XD
grazie!

hipst3r ha detto...

@pcna

Anche il tuo blog è troppo feeego! :)

alessia trans bergamo ha detto...

ciao, perche sul mio blog non funziona? non sono una nuova per quanto riguarda i codici html ma ne capisco un bel po

Clicky Web Analytics