Pubblicato il 05/02/13 - aggiornato il  | 14 commenti :

Galleria di immagini con zoom e filtro opacità.

Come installare una galleria di immagini in una pagina statica o in un widget di Blogger.
Vado a presentare una piccola galleria di immagini ciascuna delle quali può essere collegata a un articolo del blog. Si tratta di sei foto inserite in una tabella di due righe e tre colonne. Oltre a scegliere i link dei post e le foto da visualizzare si possono configurare anche le dimensioni in modo da mostrare questo widget per esempio in homepage con i post più importanti del sito oppure in una pagina statica. Nel primo caso si deve installare in un widget HTML/Javascript mentre nel secondo si può incollare il codice in Modalità HTML. Si può inserirlo direttamente anche nel template andando su Modello > Modifica HTML > Procedi e scegliendo la posizione ottimale che può essere subito sotto l'intestazione o nel footer.

Quando si passa con il mouse su una miniatura viene generato un effetto opacità e verranno mostrati contestualmente Titolo del Post, Descrizione dell'articolo e il link Leggi Tutto per aprirlo

galleria-immagini



Il codice per l'installazione della galleria è il seguente

<div align='center'>
<div id='sfondo'>
<table>
<tr><td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s1600/albero.jpg'/>
<div class='mask'>
<h2>Markerly</h2>
<p>Markerly per condividere foto</p>
<a class='info' href='http://design-prova.blogspot.it/2012/11/dimostrazione-del-servizio-markerly-per.html' target="_blank"/>Leggi tutto</a>
</div>
</div>  </td>
<td> <div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s1600/cavalli.jpg'/>
<div class='mask'>
<h2>Post popolari ruotanti </h2>
<p>Miniature ruotanti per il widget dei Post più popolari</p>
<a class='info' href='http://design-prova.blogspot.it/2012/11/demo-del-widget-dei-post-piu-popolari.html' target="_blank"/>Leggi tutto</a>
</div>
</div> 
</td> <td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNsNSsC235vGovAOEEPMBR_UeCnyxv7Q_RpekwTkpCYX_8FeruOTjaxSjbrCqvNAh-OJxX_tl_dexNUFp-0RgQoeMosFnbbVbMhR0LrlA23BH8Qr4NXqaStyInZp_E4k1EaxX2q0a0FBc/s600/natura6.jpg'/>
<div class='mask'>
<h2>Menù Multicolore</h2>
<p>Menù multicolore a più livelli per blog su Blogger </p>
<a class='info' href='http://design-prova.blogspot.it/2012/09/post-di-demo-del-menu-multicolore-piu.html' target="_blank"/>Leggi tutto</a>
</div>
</div> 
</td>
</tr>
<tr>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxL4kRMKZ-ERcezjgVUO_daIykdHrwhA-QL8343W5-y3D5iyM88a8FqJac6XG-YchJTcjnL6yxv6bkVMalxZjHdlJ59EM_mhrDbyhXwQ0GeJhc54CHHP7vJioO8gJzUsYH9uSELT6IB-I/s320/cigno.jpg'/>
<div class='mask'>
<h2>Miniature Etichetta  </h2>
<p>Widget delle miniature degli ultimi post relalivi a una categoria</p>
<a class='info' href='http://design-prova.blogspot.it/2012/09/demo-del-widget-delle-miniature-degli.html' target="_blank"/>Leggi tutto</a>
</div>
</div>
</td>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ARS8cVD5wBuYwGdcllFmbKW0IziVsTO2pQGevjjiGATJJ_PloDayzc7PubPv3s43CTTgkNxpLyPA4uAxAGBPrHp1rQNeRtmujlDdFZSHJ0Fkxu5Y1vD8XzYdxkhiwI8HE9y9hvwleo4/s320/felino.jpg'/>
<div class='mask'>
<h2>Bottone per Pinterest  </h2>
<p>Installare un pulsante per condividere le immagini su Pinterest</p>
<a class='info' href='http://design-prova.blogspot.it/2012/02/demo-inserimento-bottone-di.html' target="_blank"/>Leggi tutto</a>
</div></div>
</td>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fPx7NPr-GQR_q0FipMakzMpWojPsJuU-OAnpmFOPsWNtUqD5Ua3FhaPfInx7B6LK7iRX64in5m8uVbmBTkAhMvlrawYz_yybU4WcJglCoCsaIBSGX8lqeI8FDtNHgfqplswpFKt8vRo/s320/bovino.jpg'/>
<div class='mask'>
<h2>Scroll per widget  </h2>
<p>Come inserire un cursore laterale in un widget</p>
<a class='info' href='http://design-prova.blogspot.it/2012/02/demo-inserimento-widget-con-scroll.html' target="_blank"/>Leggi tutto</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<style>
 #sfondo {
background: #FAF8CC; width:100%; border: 2px solid #b7ae78;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(186,108,7, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view {
width: 260px;
height: 170px;
margin: 10px;
border: 2px solid #000000;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(#) no-repeat center center;
}
.view .mask,.view .content {
width: 260px;
height: 170px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 8px 0 0 0;
}
.view p {
font-family: Georgia, serif;
 font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 5px 40px ;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
</style>

Come detto questo codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure in una pagina statica  in Modalità HTML . Le personalizzazioni più importanti riguardano
  1. L'inserimento degli URL delle immagini al posto di quelli usate come test colorati di rosso
  2. L'inserimento degli URL dei post collegati al posto dei collegamenti di test colorati di rosso
  3. Il titolo del post all'interno del tag <h2>
  4. La descrizione del post dentro il tag <p>
  5. L'inserimento opzionale del tag target="_blank" per aprire l'articolo in un'altra scheda
  6. La personalizzazione della espressione Leggi tutto
  7. Il colore e il bordo dello sfondo contenitore (leggi lo stile dei bordi) nel CSS #sfondo
  8. Le dimensioni delle immagini 260x170 quelle di default 
  9. Dimensioni e famiglie di caratteri oltre a colori di testo e di sfondo
  10. Il grado di opacità dello sfondo della immagine e di quello del testo rispettivamente di 0.7 e 0.8

Fonte | BloggingeHow -


14 commenti :

  1. Wow! È davvero molto bello. Mi si è accesa una lampadina... ;) Semmai è possibile variare il numero delle foto e quindi dei link?

    RispondiElimina
    Risposte
    1. @ ElenaP
      Si tratta di una tabella. Nel post è linkato un articolo con i codici per le tabelle. Puoi provare a farne una 3x3 o 3x4. Poi è chiaro che dovrai modificare le dimensioni.

      Elimina
    2. Ok. Grazie mille :)

      Elimina
  2. I tuoi post di sono sempre utilissimi, grazie!=)

    RispondiElimina
  3. Mi sa che ci faccio una paginetta :) stasera smanetto un pò ;)
    GRAZIE!!!

    RispondiElimina
  4. interessante...potrebbe essere usato anche per creare una sorta di menu. Grazie.

    RispondiElimina
  5. Sei stato molto chiaro con la descrizione, ho messo il codice sul mio blog:)Funziona, grazie mille!!!

    RispondiElimina
  6. Si può inserire in automatico immagini che sono pubblicate sul blog senza che io devo cambiarli sempre???

    RispondiElimina
    Risposte
    1. @# Per far quello ci vogliono altri tipi di widget come questi per esempio
      http://www.ideepercomputeredinternet.com/2012/04/slideshow-degli-ultimi-post-con.html
      http://www.ideepercomputeredinternet.com/2011/08/slideshow-degli-ultimi-articoli-per.html

      Elimina
  7. Ciao Ernesto,
    si può fare questa tabella/galleria responsive?

    RispondiElimina
    Risposte
    1. Difficile con questo codice. Per una galleria responsive ho presentato queste tre soluzioni
      https://www.ideepercomputeredinternet.com/2018/06/blogger-responsive-photo-gallery.html
      https://www.ideepercomputeredinternet.com/2017/03/blogger-galleria-foto-responsive.html
      https://www.ideepercomputeredinternet.com/2016/06/galleria-immagini-css3-responsive-blogger-wordpress.html
      @#

      Elimina
  8. Ho inserito questo codice nell'aggiunta CSS, ma si vede bene solo nel cellulare e NON nel tablet: @media
    only screen
    and (max-width: 760px), (min-device-width: 768px)
    and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
    display: block;
    }

    }
    Che dici devo sistemare delle misure?

    RispondiElimina
    Risposte
    1. In questi casi bisogna solo testare per trovare le misure più adatte, senza aspettarsi miracoli
      @#

      Elimina

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