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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC53bLu75va9CclzbFeT7EX0RJcEzRfcPg66XEnyOWwdNQloX3KwwAKUBZ0recTx95xFr8J9KFeuBYierOm2xaef56tNY3ZVlZNmthQDke8Sqe3pBfj1WG5Uz5e-fKTn6z15PQf8MFkoQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXkB9dldeW_BlMwfdyck08KFlwHfqqN5V658cUKcLIoFHJrwVF_WAy4Et_Gkwffewf6Ft88nehr-hT5AE0XyrsvGrq34ijL87bmDN_5wyrfXpAE6eV3f2lUQEsIWR3zbaB6pcZReHnJYQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOhOlHlEuirK871h8LTw12Obo-4cTu_PL6IXfQeGH6gHynHZng6zfAPCI-b5FGuOkPbu3ui_lVN7AzA0Z2DkxQfNlaSLsK7WFUsxynBpwD_Ghyge0_Dv6096yHv5m068O9PKVk5NWw9Y/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mrhlznKNe3T5ci7prZC1NUk2ayje6x2CB-Wmh9KXOP1iYcCu6oNq0L2fQC2mTqBtZ0d1ikO8r9-e2lDur_PzDD04IkSpLxk0PyqcI8wqKkOmgCZAHl_sGXfyIvYH2tQ6bST_qqoa6u4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdO-u7wVZJBZYirLC0XK-Nef79AgKlvcI78axxfYgSnJxMr7OzEs7pxKM2fS-7TtRWAHirespdPkcImuliT18EcxwSe05Fje5834_930L5jakzD7K7BmTxMCf3zjy3JqJ-iDg3_FkbPc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjZLOEkYpPcqL_c7I8vpK_rrqSuFLZS47xV7Hf_Gsyq59USsYdDI6iOoXUieMinbRI8eGRURdVZw4d1tBBjreYZz7kMKeYQBs5vXroaXy_t6zIRDz6-iWAw8HDiXoQbp384gKdf6phvs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdxzrz6wUAGy8tya05Sw2LwbqDe-tJFlm1EwoH51NbMyVcVfUarTFf7biCdPZuzgGM39xExlInhGWbQm5MPWb1o1nl6Svk-zf7DGHDvsyU_iK4Ksg8OXkQW6M4M_twKagDISbEws_N2A/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.