Pubblicato il 10/05/13e aggiornato il

Galleria di immagini in 3D con titolo, descrizione e transizioni.

Una galleria di foto in tre dimensioni da installare in una pagina statica di Blogger o in una qualsiasi altra pagina web.
Ci sono widget che sono utili mentre ce ne sono altri che sono soprattutto belli. La galleria di foto basata su JQuery che vado a illustrare appartiene alla seconda categoria e mostra in modo veramente originale una serie di immagini che interagiscono con il cursore. L'idea di questo articolo mi è venuta leggendo un post di Onextrapixel, la galleria presentata utilizza il CSS3 e ha la limitazione di essere visibile solo con i browser Webkit (leggi Chrome e Safari). La serie di immagini è da installare in una pagina statica e il suo funzionamento l'ho testato con JsFiddle.

Questa presentazione può essere usata come un originale Portfolio o per mostrare ai visitatori delle schede animate in modo accattivante. Quando si passa con il mouse sopra a una immagine si alza leggermente in primo piano e se ci si clicca sopra si apre in verticale mostrando titolo e descrizione

In posizione normale le immagini si mostrano adagiate su uno sfondo color legno che dà l'effetto in tre dimensioni. Per la sua installazione si va su Bacheca > Pagine > Nuova Pagina > Pagina vuota. Si aprirà l'Editor del post e bisognerà cliccare su HTML accanto a Scrivi in alto a sinistra. Si incolla il seguente codice

<style type="text/css">
body {
    background: url(https://lh6.googleusercontent.com/-QZdPU4omYAw/UYwCnqJPVoI/AAAAAAAAhhQ/xgYOs5bTf9k/s1600/parquet.jpg) repeat fixed left top;
    margin: 0;
}
body.showing-item .item:not(.clicked){
     -webkit-filter: blur(2px) grayscale(0.5) opacity(0.8);
}
.gallery {
    margin: 0 auto;
    width: 700px;
}
.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    margin: 0 50px -175px;
    z-index: 1;
    transform-origin:20% 40%;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
}
.gallery .item:hover {
    z-index: 2;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);
}
.gallery .item.clicked{
    z-index: 3;
    -webkit-transform:none;
}
.gallery .item .caption{
    display: none;
    border-radius: 3px 3px;
    font-family: helvetica, arial;
    background: white;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
    width: 300px;
}
.gallery .item .caption:after{
background-color: #fff;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    content: "\00a0";
    display: block;
    height: 15px;
    left: -5px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    -webkit-transform: rotate( 45deg );
    width:  15px;
}
.gallery .item.left .caption:after{
    right: -8px;
    left: auto;
    box-shadow: 2px -1px 2px 0 rgba( 178, 178, 178, .4 );
}
.gallery .item .caption h1{
    color: black;
    font-weight: 100;
    text-align: center;
    letter-spacing: -1px;
    margin: 2 0 5px;
    margin-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
padding-bottom: 10px;
}
.gallery .item .caption p{
     text-align:justify;
     color: #444; 
     font-weight: 100;
}
.gallery .item.clicked .caption{
    position: absolute;
    top: 25px;
    display: inline;
    -webkit-transition-property: display;
    -webkit-transition-duration: 0.7s;
}
.gallery .item.clicked.right .caption {
    left: 115%;
    margin-left: 15px;
}
.gallery .item.clicked.left .caption {
    right: 115%;
     margin-right: 15px;
}
.gallery .item.clicked img {
    box-shadow:  0 0 25px rgba(0,0,0,0.25);
    -webkit-transform: scale(1.25);
}
.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery /1.9.2/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $(".item").click(function (e) {
        e.stopPropagation();
        $(".item").removeClass("clicked");
        $(this).toggleClass("clicked");
        $("body").addClass("showing-item");
        var offset = $(this).offset();
        var pos = offset.left + $(this).width()
        var center = $(".gallery").width() / 2;
        if (pos > center) {
            var align = "left";
        } else {
            var align = "right";
        }
        $(this).removeClass(".left, .right").addClass(align);
        return false;
    });
    $('html').click(function () {
        $(".item").removeClass("clicked");
        $("body").removeClass("showing-item");
    });
});
//]]>
</script>
<div class="gallery">
  <div class="item">
    <img align="left" src="https://lh6.googleusercontent.com/-61vxf3hxZDE/UYwQX7SywqI/AAAAAAAAhi0/URNVUTpNw9c/s512/capture1.png"/>
    <span class="caption">
      <h1>
        Screen1
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="https://lh4.googleusercontent.com/-sfaetEIttog/UYwQbEO3fjI/AAAAAAAAhi8/7_qS_F1XZOg/s512/capture2.png"/>
    <span class="caption">
      <h1>
        Screen2
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="https://lh4.googleusercontent.com/-_yx4KjeKi3s/UYwQhkwd8gI/AAAAAAAAhjM/vkctX6_AN70/s512/capture4.png"/>
    <span class="caption">
      <h1>
        Screen3
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="https://lh6.googleusercontent.com/-7N2J_cDfgZs/UYwQlaFsbCI/AAAAAAAAhjU/DH3FJ1Lnt4A/s512/capture5.png"/>
    <span class="caption">
      <h1>
        Screen4
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="https://lh4.googleusercontent.com/-gDpkIuciTGw/UYwQo5dUAzI/AAAAAAAAhjc/Y1la2bCPQwQ/s512/capture6.png"/>
    <span class="caption">
      <h1>
        Screen5
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="https://lh6.googleusercontent.com/-xy63CNknbnA/UYwQsbOcwiI/AAAAAAAAhjk/_OAfl-DiZaw/s512/capture7.png"/>
    <div class="caption">
      <h1>
        Screen6
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </div>
  </div>
</div>

Si va su Pubblica per mettere online la nostra nuova pagina. Lo sfondo è dato dalla immagine denominata parquet che può essere sostituita da un'altra anche di maggiori dimensioni. Se si vuole utilizzare un colore invece di una immagine basta sostituire il blocco di codice con questo

body {background-color: #eeffee;}    vedi anche il post sui codici dei colori 

Le immagini della galleria hanno un URL colorato di rosso e indicativamente hanno dimensioni di 320x573 pixel. Per ciascuna immagine si può inserire il titolo tra i tag <h1 e </h1> e la descrizione tra i tag <p> e </p>. Lo stile del titolo è determinato dal CSS .gallery .item .caption h1 mentre quello della descrizione dal foglio di stile .gallery .item .caption p.



Per avere più spazio a disposizione è opportuno togliere la sidebar dalla pagina in cui si mette la galleria o addirittura in tutte le pagine statiche. Nel primo caso il codice si incolla subito sopra a questo direttamente nella pagina pubblicata mentre nel secondo caso si deve modificare il modello.




8 commenti :

  1. Un saluto a Lei, Signor Ernesto,

    innanzitutto sempre un grazie copioso per la Sua pazienza. Senta, per favore, mi potrebbe spiegare come inserire nel Footer del blog tre colonne piccole allineate orizzontalmente? Proprio come quelle del Suo blog. Poi, per caso Lei ha progettato un widget " Articoli più letti oggi "? Grazie di cuore

    RispondiElimina
    Risposte
    1. @# Esiste il widget dei Post più popolari. Bisogna andare su Layout > Aggiungi un gadget > Post più popolari e selezionare gli ultimi 7 giorni. L'opzione Solo Oggi non esiste su Blogger.
      Per il modello si tratta di un semplice template di Blogger. Quando vai su Modello > Personalizza > Layout > Layout piè di pagina puoi scegliere di mettere una, due o tre colonne. Prima di fare questa operazione salva il template.

      Elimina
    2. Ho carpito. Ma volendo si potrebbe ottenere qualcosa del tipo " Articoli più letti oggi ", visto che molti siti di notizie hanno di questo widget?
      Non ho rammentato di scriverle che, il mio template, non si può modificare tramite le varie funzioni di Blogger, perchè lo scaricato da internet. Magari, qualora voglia, mi potrebbe dire come reperire il codice HTML per creare tre colonne nel Footer. Visto che non voglio per davvero disturbarla, se è una operazione che la induce ha sprecare molto del Suo tempo, non si preoccupi, visto che già ho disturbato tanto. Un saluto

      Elimina
    3. @# I siti a cui ti riferisci non sono su Blogger ma hanno dei database accessibili. Per inserire tre colonne nell'area del footer prova con questo post ma ti avverto che è molto vecchio
      http://www.ideepercomputeredinternet.com/2009/06/come-aggiungere-tre-nuove-colonne-nella.html
      http://www.ideepercomputeredinternet.com/2009/06/personalizzazione-delle-tre-colonne.html

      Elimina
    4. Buonasera a Lei,
      perdoni il mio tardare, comunque grazie per il Suo suggerimento. Come già precisò Lei, avrei potuto incontrar delle difficoltà, visto che in circa quattro anni è mutato molto il codice HTML in Blogger. Nel mio caso, le colonne son andate nel stravolgere l'equilibrio della grafica. Comunque grazie di cuore. Senta, qualora sia possibile, vorrei d'un Suo parere su di un fatto sempre inerente al mondo della rete. Come posso far per inviarle d'un " messaggio " che prende in visione solo Lei? Un saluto

      Elimina
  2. Ciao, questa galleria può essere usata in un blog con visualizzazioni dinamiche?

    RispondiElimina
    Risposte
    1. @# Non ti resta che provare. Vai su Pagine > Nuova pagina > Pagina vuota e incolli il codice in modalità HTML quindi pubblichi. SE funziona in un secondo tempo potrai modificare le immagini

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.