Portfolio Image Navigation with jQuery

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

The beautiful photography is by Angelo González. Check out his Flickr photostream or follow him on Twitter @ag2r.

The Markup

For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside:

<div id="portfolio">
	<div id="background"></div>		
	<div class="arrows">
		<a href="#" class="up">Up</a>
		<a href="#" class="down">Down</a>
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
	<div class="gallery">
		<div class="inside">
			<div class="item">
				<div><img src="images/1.jpg" alt="image1" /></div>
				<div><img src="images/2.jpg" alt="image2" /></div>
				<div><img src="images/3.jpg" alt="image3" /></div>
			</div>
			<div class="item">
				<div><img src="images/4.jpg" alt="image4" /></div>
				<div><img src="images/5.jpg" alt="image5" /></div>
			</div>
			<div class="item">
				<div><img src="images/6.jpg" alt="image6" /></div>
				<div><img src="images/7.jpg" alt="image7" /></div>
				...
			</div>
			<div class="item">
				...
			</div>
		</div>
	</div>
</div>

Now, let’s take a look at the style.

The CSS

First, let’s define the style for the main container. We’ll set it’s position to be fixed and center it in the screen with the 50% and negative margin technique:

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

The background will also be fixed and we’ll add a background image that creates the spotlight effect:

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

The gallery will be positioned absolutely, just like it’s inner div:

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

The gallery will also occupy all the space of the portfolio:

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

We’ll fix the z-index of the inside div in order for keeping the stacking right:

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

Now, we’ll style the arrows. First, we’ll define the common style:

#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;
}

And then we’ll style all the single arrows:

#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;
}

The item divs, which are our wrappers for the image sets will be styled as follows:

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

Each image wrapper will be positioned absolutely, too and occupy all the space:

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

Each image will be centered. Keep in mind that in our example we are using images with a width of 600px, so if you use different ones, you need to adapt this:

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

Let’s style the little boxes navigation which will be added dynamically:

#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;
}

And that’s all the style!

The JavaScript

In this part, we’ll show you how to initialize the plugin.
In the head of our HTML file, we will include the following three scripts:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

The first one is the jQuery library, the second one is our plugin and the third one is the initialization script:

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

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

The default option values for our plugin are the following:

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

The image options are the width, height and the margin between the images. The path options define the aspect of the little navigation boxes, how big they should be and how much margin they should have. Last, the animation speed can be adjusted.

Stay tuned for the next tutorial!