Effetto LyteBox per immagini, gallerie di foto e slideshow da inserire in blog su Blogger.

Prima di iniziare l'illustrazione della procedura per ottenere questi effetti forse è il caso di  dare uno sguardo a quello che provocano queste personalizzazioni. Ho pubblicato tre post nel sito di prova Mènù Orizzontale che credo siano sufficientemente esplicativi

• Effetto LyteBox su una singola immagine -
• Effetto Lytebox per la creazione di una galleria di immagini -
• Effetto Lytebox per la creazione di slideshow -

Per apprezzare gli effetti dovete cliccare sopra ad una qualsiasi immagine. Questo effetto è simile a quello Lightbox che ho illustrato in un altro articolo forse però è anche migliore.
Andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercate la riga </head>, quindi, immediatamente sopra incollateci il seguente codice

<!-- 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 - http://goo.gl/GRcov -->

come mostrato dal seguente screenshot


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 o postando con Windows Live Writer. Cercherò di prendere in esame tutte le possibilità
Efffetto Lytebox su singola immagine
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, ci sarà un'espressione del tipo <a onblur="try{parent, se usate il vecchio editor. In questo caso inserite l'attributo rel="lytebox" in questo modo <a rel="lytebox" onblur="try{parent.
Nel caso usiate l'editor aggiornato di Blogger l'espressione rel="lytebox" dovrà essere inserita come mostrato nel seguente screenshot


Se invece si utilizza WLW bisogna prima caricare l'immagine nel web con un servizio tipo Skydrive, quindi inserirla nell'articolo andando su Immagine. Dopo averla selezionata si passa nella sezione di destra e si sceglie Collega a URL
                  
In URL si incolla l'indirizzo dell'immagine mentre nella parte bassa della finestra, in "Rel" si scrive "lytebox" (senza virgolette). Quindi si clicca su OK. L'effetto ottenuto su una immagine è quello che potete vedere nel primo esempio di Lytebox.

Effetto LyteBox su una galleria di immagini
La metodologia di inserimento è la stessa riguardo all'esempio precedente, cambia soltanto l'espressione da inserire in Rel. Se vogliamo che un certo numero di immagini facciano parte di una stessa galleria dobbiamo innanzitutto sceglierne il nome. Nel mio esempio ho usato tramonto visto che si tratta di immagini di quel tipo ma si può scegliere qualsiasi altro nome. Quello che conta è che tutte le immagini che vogliamo facciano parte della galleria, lo devono avere tra le parentesi quadre.
Se si inseriscono le immagini con l'editor di Blogger dobbiamo aggiungere, in modalità HTML, il seguente attributo

rel="lytebox[tramonto]"

se invece usiamo WLW, quando andiamo a collegare l'immagine al suo URL in "Rel" dobbiamo digitare

lytebox[tramonto]

come mostrato nel seguente screenshot

In questo caso, nel momento in cui si clicca con il mouse su un'immagine, oltre a ingrandirsi con il solito effetto compariranno anche dei pulsanti (PREV sulla sinistra e NEXT sulla destra) per passare all'immagine precedente o successiva. In basso sarà anche visualizzato il numero di immagini presenti nella galleria che abbiamo creato


Creazione di slideshow con Lytebox
La differenza rispetto ai metodi precedenti sta nel fatto che in questo caso si deve inserire l'espressione rel="lyteshow[mare]" se si utilizza l'editor di Blogger. In cui mare è il nome che si è dato allo slideshow e può essere scelto a piacere. Anche in questo caso quello che conta è che le immagini che vogliamo facciano parte dello slideshow devono avere la stessa espressione tra parentesi quadre.
Se le immagini si inseriscono con WLW occorre collegare ciascuna immagine al suo URL, come visto in precedenza e inserire in Rel l'espressione lytebox[mare], con tutte le precisazioni fatte prima. Gli slideshow mostreranno il numero e il nome di ciascuna immagine

sarà visualizzato anche un pulsante per interrompere la successione delle immagini. In questo slideshow ciascuna foto rimarrà visibile per circa 2-3 secondi.
Esistono ulteriori applicazioni di questo effetto e, nel caso incontrasse il favore dei lettori, potrei dedicargli un nuovo post. Mi sono basto su un lavoro di Markus F. Hay per Dolem LyteBox 3.2.

---