CSS3: pila di foto random (and jQuery live event)

Creiamo una pila di foto dandogli come effetto quello di essere buttate a caso una sopra l’altra nel loro contenitore e le sfogliamo cliccandoci sopra.

Come prima cosa pre pariamo in javascript l’array delle nostre immagini:

var foto=new Array(12);
foto[0]=’/foto/DSC00077.JPG’;
foto[1]=’/foto/DSC00078.JPG’;

tutte quelle che vogliamo.

In secondo luogo prepariamo un div contenitore e una lista che popoleremo con le nostre foto.

<div id=”contenitore”><ul id=”griglia”></ul></div>

Passiamo al css, quello di routine innanzitutto:

body {font-family: “Lucida Grande”, Verdana, Arial, sans-serif;}
#contenitore{ margin:50px auto; width:300px;}
#griglia { padding:0; margin:0; list-style:none; width:300px; height:300px; }
#griglia li { padding:0; margin:0; list-style:none; }

Poi passiamo alle cose specifiche, le liste saranno posizionate in modo assoluto:

.foto{position: absolute;}

questo ci serve per posizionarle una sopra l’altra.

Per dare l’effetto di sovrapposizione casuale, le foto dopo la prima saranno leggermente ruotate ciascuna in una direzione diversa, usando quindi le proproetà di css3:

.foto:nth-last-child(2) img{-webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-o-transform: rotate(-5deg);-ms-transform: rotate(-5deg);transform: rotate(-5deg);}
.foto:nth-last-child(3) img{-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);-ms-transform: rotate(5deg);transform: rotate(5deg);}
.foto:nth-last-child(4) img{-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
.foto:nth-last-child(5) img{-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}

in questo modo non risulteranno esattamente sovrapposte.

Successivamente diamo dimensioni, bordo e ombra alle nostre foto:

.foto img { max-width: 100%; height: auto; border: 5px solid #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);}

Non resta che aggiungerle alla pagina tramite jQuery.

Al document.ready

facciamo un ordinamento random dell’array

e poi sullo stesso un ciclo foreach per creare tutti gli elementi:

foto.sort(randomFunct);
$.each(foto, function(i, el) {$(‘#griglia’).append(‘<li><img src=”‘+foto[i]+’”></li>’);});

A questo punto la visualizzazione è fatta, come ultima cosa possiamo mettere queste istruzioni in una funzione

al fine di intercettare il click sulle foto stesse e mostrare la pila riorganizzata.

Particolare interessante non potremo usare il semplice gestore ‘click’ sul document.ready poiché

la lista viene creata dopo, useremo quindi on in modo da evitare il ricorso al deprecato live.

function randomFunct() { return 0.5 – Math.round(Math.random()); }
$(document).ready(function(e) {mostra_foto();}).on(‘click’,'#griglia li img’,function(){mostra_foto();});

function mostra_foto(){
foto.sort(randomFunct);
$.each(foto, function(i, el) {$(‘#griglia’).append(‘<li><img src=”‘+foto[i]+’”></li>’);});
}

L’esempio