jPhotoGrid: griglia di immagini

27 mar 2010    No Comments    Categoria: Plugins

jPhotoGrid prende un semplice elenco di immagini e didascalie e lo trasforma in una griglia di foto che possono essere esplorate ed ingrandite.

Il trucco sta nel layout della griglia  che contiene una lista di voci. La prima cosa che il plugin svolgerà poi è convertire questa lista posizionandola in modo assoluto. Questo è ciò che permette al plugin di zoomare su una singola immagine e poi tornare al suo posto.

Il javascript è abbastanza facile da configurare: ha esclusivamente bisogno di sapere la dimensione delle miniature, e la dimensione ed il posizionamento dell’immagine ingrandita.

E’ anche possibile modificare le classi degli elementi attivi e selezionati modificando le classi  ‘activeClass’ e ‘selectedClass’ del foglio stile.

La lista delle immagini deve essere fornita nel seguente modo:

<ul>
	<li>
		<img src="immagine.jpg" alt="" />
		<p>Didascalia immagine qui</p>
	</li>
	...
<ul>

Il foglio stile deve invece contenere le seguenti voci:

#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }

Per finire, questo il codice javascript da inserire:

$('#pg').jphotogrid({
	baseCSS: {
		width: '175px',
		height: '117px',
		padding: '0px'
	},
	selectedCSS: {
		top: '50px',
		left: '100px',
		width: '500px',
		height: '360px',
		padding: '10px'
	}
	});

Download

Sito autore e demo: http://www.newmediacampaigns.com/files/posts/jphotogrid/example.html