Navigare in un portfolio con jQuery

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!