Sunday, June 26, 2011

LyteBox sulle immagini inserite in Blogger

Ovviamente non l'ho scoperto io né tantomeno me lo sono inventato.

Copio e incollo un riassunto delle istruzioni per l'effetto tipo Lightbox per le immagini inserite in questo Blog!

Andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercate la riga </head>, quindi, immediatamente sopra incollateci il seguente codice (ovviamente potete scaricare i file necessari e metterli dove volete):


<!-- EFFETTO LYTEBOX INIZIO -->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js' type='text/javascript'/>
<!-- EFFETTO LYTEBOX FINE -->

Salvate il modello e la personalizzazione è completata.
Per attivarla bisogna operare sul codice delle foto inserite. Si possono ottenere effetti su una singola immagine, su un'intera galleria e creare degli slideshow attraverso l'editor di Blogger.


Vediamo per la singole immagine come fare.
Se si posta l'immagine con l'editor di Blogger possiamo farlo selezionandola dall'hard-disk o dal web, personalmente preferisco la seconda ipotesi ma per l'effetto è indifferente.
Se si carica dal computer, bisogna passare alla modalità HTML andando su Modifica HTML. Nel codice relativo all'immagine che abbiamo caricato: individuare il tag <a> e subito dopo, inserire l'espressione rel="lytebox".

<a rel="lytebox" href="....

Se vogliamo una gallery, dobbiamo innanzitutto sceglierne il nome, ad es "tramonti".
Poi si fanno le modifiche come sopra, con l'attenzione di mettere l'espressione rel="lytebox[tramonti]".


E per le gallery: