Come creare una galleria fotografica in una pagina statica con l'effetto Lytebox.

Le pagine statiche hanno aperto diverse prospettive di sviluppo del blog. La personalizzazione di una pagina statica attraverso l'eliminazione della sidebar dà modo di avere a disposizione un intero layout per inserirci cose che prima non potevamo fare.
Se abbiamo creato delle pagine statiche sufficientemente larghe possiamo anche inserire una galleria fotografica che possa fare da supporto al blog. Penso a blog aziendali che vogliono presentare le foto dei loro prodotti in uno stesso luogo oppure a siti immobiliari con le foto delle abitazioni in catalogo. Praticamente tutti i blog in cui le immagini hanno un'importanza fondamentale potrebbero essere interessati a creare una tale galleria.
Questa può tranquillamente essere inserita senza nessun effetto speciale. In questo caso potrebbe essere opportuno inserire le foto all'interno di una tabella. Nell'editor di Blogger non esiste la possibilità di generare una tabella ma si può usare Windows Live Writer.
Se si vuole inserire degli effetti si può scegliere tra Expando, Lightbox o Lytebox tra quelli che ho presentato in questo blog. Nel mio blog di prova ho creato una pagina statica denominata Gallery con diverse foto incorporate con l'effetto Lytebox.
Traccio le linee che ho seguito per la realizzazione

1. Ho creato una pagina statica -
2. Ho eliminato la sidebar e allargato l'area di layout -
3. Ho modificato il modello incollando il codice di Lytebox -

Si tratta in sostanza di andare in Layout > Modifica HTML, cercare la riga </head> e, immediatamente sopra, incollare il seguente codice

<!--EFFETTO LYTEBOX INIZIO-->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-1.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://www.ideepercomputeredinternet.com-->

Per rendere effettivo questo effetto bisogna inserire l'attributo rel="lytebox" nel link dell'immagine, come illustrato nell'articolo. Se si vuole creare una galleria occorre inserire rel="lytebox[nome-galleria]". Nel caso di uno slideshow la stringa diventa rel="lyteshow[nome-slideshow]".
Per far questo vi consiglio di utilizzare Windows Live Writer perché è più semplice e immediato. Le immagini possono anche essere inserite in una tabella. Non si può pubblicare nel blog la galleria così editata, occorre quindi andare su Origine, selezionare tutto il codice della galleria di foto, copiarlo e incollarlo nell'editor della pagina di Blogger in modalità HTML.

Nella pagina statica di dimostrazione non ho inserito la tabella, quindi il lavoro non è accuratissimo. Ho però inserito due gallerie fotografiche e uno slideshow.
Le due gallerie sono state realizzate mediante l'inserimento nei link delle stringhe lytebox[tramonto] e lytebox[mare] mentre lo slideshow è stato creato inserendo lyteshow[belledonne]. Nel caso delle gallerie, quando si clicca su una foto, questa si evidenzia e mostra i due collegamenti per andare alla foto successiva o a quella precedente

il tutto in uno sfondo oscurato per far risaltare meglio l'immagine. Nel caso dello slideshow, quando si clicca su una foto si passa automaticamente alla successiva dopo tre secondi come in un filmato. Per iniziare bisogna cliccare sul simbolo di Play. E' presente anche il bottone di pausa per soffermarsi su una immagine in particolare

Se si clicca sulla prima foto non occorrerà andare su Play ma la riproduzione inizierà in automatico. Alla fine dello slideshow l'effetto terminerà senza bisogno di cliccare su Close.