Creiamo un portfolio navigabile con jQuery. L’obiettivo e’ quello di navigare all’interno delle immagini presenti nella raccolta semplicemente cliccando in tutte le direzioni previste dal 2D (su, giu’,destra e sinistra).

Le fotografie usate per la demo sono del fotografo Angelo Gonzales, presenti in Flickr.

Partiamo a bomba!

CODICE HTML

L’ossatura del nostro portfolio ha un DIV principale che raccoglie le fecce di navigazione:

<div id="portfolio">
<div id="background"></div>
<div class="arrows">
<a href="#">Up</a>
<a href="#">Down</a>
<a href="#">Previous</a>
<a href="#">Next</a>
</div>

E poi un DIV gallery che contiene le immagini, divise in classi chiamate “item”:

<div class="gallery">

<div class="inside">

<div class="item">

<div><img src="images/1.jpg" alt=""/></div>

<div><img src="images/2.jpg" alt=""/></div>

<div><img src="images/3.jpg" alt=""/></div>

</div>

<div class="item">

<div><img src="images/4.jpg" alt=""/></div>

<div><img src="images/5.jpg" alt=""/></div>

</div>

.....

Non credo ci sia bisogno di aggiungere altro, passiamo al foglio di stile.

CODICE CSS

Definiamo il DIV principale che e’ #portfolio

<pre>#portfolio {
	position:fixed;
	top:50%;
	left:50%;
	z-index:1;
	width:1000px;
	height:500px;
	margin:-250px 0 0 -500px;
}

Adesso mettiamo lo sfondo che dovra’ essere fisso e contenere un’ immmagine di background:

<pre>#background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	background:url(../images/bg.png) no-repeat center;
}

Posizioniamo #gallery in posizione assoluta e che prenda il 100% del DIV portfolio:

#portfolio .gallery,
#portfolio .gallery .inside {
	position:absolute;
	top:0;
	left:0;
}

#portfolio .gallery {
	width:100%;
	height:100%;
	overflow:hidden;
}

Fissiamo un z-index per far rispettare l’ordine di raccolta:

#portfolio .gallery .inside {
	z-index:1;
}

E adesso inseriamo le frecce:

#portfolio .arrows a {
	position:absolute;
	z-index:3;
	width:32px;
	height:32px;
	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
	outline:none;
	text-indent:-9999px;
}

#portfolio .arrows .prev,
#portfolio .arrows .up {
	display:none;
}

#portfolio .arrows .up,
#portfolio .arrows .down {
	left:50%;
	margin-left:-16px;
}

#portfolio .arrows .prev,
#portfolio .arrows .next {
	top:180px;
}

#portfolio .arrows .up {
	background-position:0 -64px;
	top:20px;
}

#portfolio .arrows .down {
	background-position:0 -96px;
	bottom:120px;
}

#portfolio .arrows .prev {
	background-position:0 -32px;
	left:60px;
}

#portfolio .arrows .next {
	background-position:0 0;
	right:60px;
}

#portfolio .arrows .up:hover {
	background-position:-32px -64px;
}

#portfolio .arrows .down:hover {
	background-position:-32px -96px;
}

#portfolio .arrows .next:hover {
	background-position:-32px 0;
}

#portfolio .arrows .prev:hover {
	background-position:-32px -32px;
}

Adesso inseriamo la classe item e centraimo le immmagini in questa classe:

#portfolio .item {
	position:absolute;
	top:0;
	width:1000px;
	height:400px;
}

#portfolio .item div {
	position:absolute;
	left:0;
	width:100%;
	height:100%;
}

#portfolio .item div img {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-300px;
}

Creiamo piccoli quadratini che faranno vedere ogni item di quante foto e’ composto:

#portfolio .paths {
	position:absolute;
	bottom:60px;
	left:50%;
	margin-left:-30px;
	z-index:4;
}

#portfolio .paths div {
	position:absolute;
	top:0;
}

#portfolio .paths a {
	background:#333;
	display:block;
	position:absolute;
	left:0;
	outline:none;
}

#portfolio .paths a:hover,
#portfolio .paths .active {
	background:#fff;
}

CODICE JAVASCRIPT:

Il codice viene richiamato nella nostra pagina Html. Molto semplice il suo funzionamento, da’ una funzione di velocita’ nel passare da un’immagine all’altra e stabilisce la grandezza sia delle immagini principali che dei box piccoli, modello thumbs, della classe item.

<pre>var o = {
	init: function(){
		this.portfolio.init();
	},
	portfolio: {
		data: {
		},
		init: function(){
			$('#portfolio').portfolio(o.portfolio.data);
		}
	}
}

$(function(){ o.init(); });

$('#portfolio').portfolio({
	image: {
		width: 600,
		height: 400,
		margin: 20
	},
	path: {
		width: 10,
		height: 10,
		marginTop: 5,
		marginLeft: 5
	},
	animationSpeed: 400
});

Questo e’ tutto per questo tutorial. Qui potete scaricare il file della demo.

Alla prossima!