Per la serie di tutorial e risorse su javascript, oggi ti segnalo jPhotoGrid, un fantastico plugin jquery che ti permetterà di realizzare gallerie fotografiche in un attimo.

Guarda subito l’esempio per capire le potenzialità di questo plugin.

La gallery è compatibile con tutti i browser, compreso Internet Explorer 6.

Per realizzarla sarà sufficiente scaricare i sorgenti e inserire una lista non ordinata di immagini.

Tutte le spiegazioni sul funzionamento della gallery le puoi trovare nella pagina ufficiale del plugin. Vediamo invece come la possiamo personalizzare.

Personalizzazione della gallery

1. Modificare le dimensioni della griglia

In base al numero di foto che vorrai inserire, dovrai aumentare o diminuire le dimensioni della griglia, agendo sul selettore #pg, andando ad aggiungere l’attributo width, e modificando l’attributo height, nel foglio di stile jphotogrid.css, in questo modo.

#pg { position: relative; width:700px; height: 585px; background: #000; }

2. Modificare le dimensioni delle miniature

Ad esempio se vorrai 5 foto per riga invece che quattro dovrai modificare la larghezza (portandola a 140px) e l’altezza (94px) delle foto in 2 file:jphotogrid.css, agendo sul selettore #pg li e sullo script setup.js, in corrispondenza del selettore baseCSS.

jphotogrid.css

#pg li { position: relative;
list-style: none;
width: 140px;
height: 94px;
overflow: hidden;
float: left;
z-index: 2;
opacity: .3; }

setup.js

baseCSS: {
			width: '140px',
			height: '94px',
			padding: '0px'
		}

3. Modificare le dimensioni delle foto grandi

Infine per modificare le dimensioni delle foto, basterà agire sul file setup.js, modificando sempre gli attributi width ed height nel selettore selectedCSS

selectedCSS: {
			top: '50px',
			left: '100px',
			width: '800px',
			height: '576px',
			padding: '10px'
		}

Scarica il sorgente

Guarda l’esempio

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery: Incredibile Gallery Fotografica Jquery e CSS3

Per la serie di articoli SideTuts, oggi ti segnalo una fantastica gallery basata su Jquery e CSS3. Il tutorial, realizzato da Tutorialzine, è...

Supersized – Slideshow di Immagini a Schermo Intero

Supersized è un plugin Jquery implementato da Sam Dunn che permette di realizzare uno slideshow di immagini a pieno schermo, adattandole alle...

Tutorial jQuery – Fade Hover Animato Su Immagini, Testi e Div

Appuntamento con i tutorial jquery, dove oggi andiamo a vedere come ottenere un effetto fade animato al passaggio del mouse sopra un elemento, in...