Galleria di foto da inserire in una pagina statica o in un post.

Dai commenti che ricevo quotidianamente mi accorgo che le gallerie di foto insieme agli effetti e ai widget sono gli argomenti che interessano maggiormente i lettori di questo blog. In questo articolo presento una galleria di immagini che credo sia interessante anche se ha il difetto che non si può personalizzare più di tanto perché le dimensioni sono collegate le une all'altre. Questo non significa che non si possa modificare ma bisogna avere una certa conoscenza dei CSS per poter adattare lo stile della galleria alle nostre esigenze.

• Demo della Galleria di foto a blocchi di quattro -

La particolarità è che si possono inserire blocchi di quattro foto che, quando vengono puntate con il mouse, si espandono e si visualizzano sulla destra

In una stessa foto possiamo inserire quanti blocchi di foto desideriamo ma solo a blocchi di quattro. Si inizia andando su Design > Modifica HTML e si cerca la riga </head> quindi, immediatamente sopra si incolla il seguente codice

<!--Galleria Foto Inizio-->
<link href='https://sites.google.com/site/scriptperilblog/slideshow/stile-galleria-post.css' media='screen' rel='stylesheet' type='text/css'/><style type='text/css'>.Galleria2 img {background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZ241vWiYSWPigLDAMYP7Rlb8tdclWDWoaGCqCkahDy0gnOqHPQsZSuGU_Ky5PIteOqACX4pTprp_9BYE3oRxrsxfP6OPy_cS66TxLb9t_KDxNYOREqSxoMiLTBMYddKO_npsrozG1JE/&quot;) no-repeat scroll 0 0 transparent;}</style>
<!--Galleria Foto Fine- http://www.ideepercomputeredinternet.com-->

Si salva il modello. Per la creazione di una galleria, bisogna andare in modalità HTML e incollare un codice simile a questo

<div id="Galleria1">
<a href="javascript:void(0);" class="Galleria2"><img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jjCNQqUZmR4Yc_PRq_fknNLrDBlzqreJcVygc0ymjSucT-To2hCQ0s8u6AHZ8ZD2Q7_o85uumLgyTdOq1NbeGS1iXGeGy_lZATv6vKIdbmwm78Zbl4IelRuzDugWTGSjHL8qR9p5ae0/"><span><img width="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jjCNQqUZmR4Yc_PRq_fknNLrDBlzqreJcVygc0ymjSucT-To2hCQ0s8u6AHZ8ZD2Q7_o85uumLgyTdOq1NbeGS1iXGeGy_lZATv6vKIdbmwm78Zbl4IelRuzDugWTGSjHL8qR9p5ae0/">
LAGO</span></a>
<a href="javascript:void(0);" class="Galleria2"><img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdf65ONtDt56M8vfJb4UfIV1asQKlLVWrha8bX5PXYeoAj3o_7cjZyeL6MipMYAjhlGksAIvVKZk9YQt8LTt_c10YMS7Wr2Htgs7VkFCXbnSZI1_nHVW9LNy-wswlxUGvFLyVyKBRa4I/"><span><img width="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdf65ONtDt56M8vfJb4UfIV1asQKlLVWrha8bX5PXYeoAj3o_7cjZyeL6MipMYAjhlGksAIvVKZk9YQt8LTt_c10YMS7Wr2Htgs7VkFCXbnSZI1_nHVW9LNy-wswlxUGvFLyVyKBRa4I/">
CANYON</span></a>
<a href="javascript:void(0);" class="Galleria2"><img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcx-4_89SmDuNQWSGxnynWn56SwxSCyY5Op9enAffqHYYz3ezrAH3uLZdnwoRAgmDgTtBviBw3heUBa3FcHEnrkRKVjkXix4YXXx9WeKqR8zkm9PjDkobRdNhiHVaJmUYxEOZ4y7CCMeG/"><span><img width="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcx-4_89SmDuNQWSGxnynWn56SwxSCyY5Op9enAffqHYYz3ezrAH3uLZdnwoRAgmDgTtBviBw3heUBa3FcHEnrkRKVjkXix4YXXx9WeKqR8zkm9PjDkobRdNhiHVaJmUYxEOZ4y7CCMeG/">
PESCE TROPICALE</span></a>
<a href="javascript:void(0);" class="Galleria2"><img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRo5jIYaGmYxWIReI_leiTY81RcJrLSc6r1h2deLai7rHJNvKyxfyyjK5wAZFQZmtfuXy3xw9jGM7OtrUuCELSm52lBppCi4ZEmYG64rmCnA6YLRw3LIJiT4Q5MFX6oyD4k2yNpJ1L5_94/"><span><img width="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRo5jIYaGmYxWIReI_leiTY81RcJrLSc6r1h2deLai7rHJNvKyxfyyjK5wAZFQZmtfuXy3xw9jGM7OtrUuCELSm52lBppCi4ZEmYG64rmCnA6YLRw3LIJiT4Q5MFX6oyD4k2yNpJ1L5_94/">
STRADA</span></a></div>

Dove si inseriscono gli URL delle immagini che devono essere preventivamente caricate su Picasa, su SkyDrive o DropBox. Gli URL sono colorati di rosso e vanno inseriti due volte per ciascuna immagine. Va inserito anche il nome della foto che è colorato di blu. Si pubblica il post o la pagina direttamente dalla modalità HTML. La galleria di foto può anche essere inserita in Design > Aggiungi un gadget > HTML/Javascript. Le immagini che vengono caricate possono avere dimensioni anche abbastanza diverse tra loro, basta mantenere una certa proporzione tra l'altezza e la larghezza. Come detto, in una stessa pagina si possono inserire tutti gli album che vogliamo basta che contengano quattro immagini. Si possono anche inserire i tag Alt e Title per una migliore usabilità e indicizzazione della galleria secondo questa sintassi

<a href="javascript:void(0);" class="Galleria2"><img width="100" src="URL IMMAGINE"><span><img width="380" src="URL IMMAGINE" title="Nome" alt="Testo Alternativo">
TITOLO</span></a>

Fonte | El Balcon -