Tutorial Jquery – Bellissime Gallery Di Foto in 5 Minuti

• Tweet

• Tweet

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