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