Pubblicato il 14/03/11 - aggiornato il  | 6 commenti :

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.

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

galleria foto

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 -



6 commenti :

  1. guida molto utile, un solo dubbio, per aumentare la grandezza delle immagini visualizzate??? aumentando width non varia nulla

    RispondiElimina
  2. @Michele
    Prova a modificare questo CSS
    https://sites.google.com/site/scriptperilblog/slideshow/stile-galleria-post.css
    Adesso non mi ricordo ma penso sia possibile inserire altre misure

    RispondiElimina
  3. certo che o spieghi male o sei proprio una pippa... tutto quello che dici non funziona... ho provato a caricare l'html tale e quale a come l'hai messo e tu e non mi appare una galleria, bensì solo le immagine statiche del lago, del pesce , ecc...

    RispondiElimina
    Risposte
    1. Può darsi che sia una pippa come dici tu fatto sta che nella Demo che ho creato in questa pagina
      http://scriptaculous-menu.blogspot.it/2011/03/galleria.html
      il codice e la galleria funzionano
      @#

      Elimina
  4. boh non capisco perché , ho provato a copiare ed incollare il codiche html come l'hai scritto tu.. tale e quale com'era senza modificare nulla per fare una prova... e mi sono apparse tutte le immagini una sotto l'altra, completamente statiche, con una piccola miniatura dell'immagine stessa a fianco.........

    RispondiElimina
  5. il mio blog è notiziegaydalmondo.blogspot.com , completamente gratuito, non ho mai pagato nulla...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy