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.


View demo Download source

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!

View demoDownload source

Previous:
Next:

Tagged with:

Marcin is an experienced and creative web developer from Poland. He loves putting new ideas into practice and is addicted to jQuery and CSS. Read his blog about web development here: http://www.jscraft.net.

View all contributions by

Website: http://playground.mobily.pl/

Related Articles

Feedback 53

Comments are closed.
    • 2

      Did you ever figure out how to start from a different image than the top left corner? I am at a loss.

  1. 5

    Can you show us a way to have a description displayed for each photo? Probably somehow using an XML file? This would be a really nice addition to the beautiful photo gallery.

    Also as someone else mentioned above, maybe a way to name each different photo album (or column)?

  2. 6

    can we have video be a part of the gallery, so in navigation if someone has youtube they could just let that be a part of the navigation? hmmmmmmmmm?

  3. 8

    This is neat…..I can see the artistic value in it. I think its probably going to be limited to online portfolio’s and such. Just cant see it being really functional in a normal web application.

  4. 12

    Is it possible to have fullscreen pictures or yet better controlling div tags instead of images? Let me know thanks

Comments are closed.