Fw

Wordpress Creative Developer

Tutorial Jquery – Bellissime Gallery Di Foto in 5 Minuti

  • Tutorial Jquery
  • -

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.

Galleria Di Foto Jquery In 5 Minuti

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.

Come Inserire Le 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

1 commento

  1. Buonasera, sono una studentessa in design, e sono alle prime armi nel campo del web, per un esame devo realizzare una piattaforma web, e non ho idea di come si fanno i collegamenti in flash e soprattutto devo realizzare una gallery, ma ho molta difficoltà a capire bene i tutorial che ci sono in rete, mica ha qualcosa da consigliarmi….di molto ma molto facile da seguire? la ringrazio molte cordiali saluti Eva

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *