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.

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!

Tagged with:

Marcin Dziewulski

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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 53

Comments are closed.
  1. I saw instagreat the other day.
    And I think they should use this. It’s make photo browsing way more fun. 😀

    But I think it’s missing the keyboard navigation.

    Superb job BTW.

  2. This is really great and I think it helps navigation to be more precise.

  3. Love the concept but as a photographer i would rather control the vignetting on a photo to photo basis.

  4. really nice tutorial.. but like others say, maybe you could write a 2nd part about keyboard navigation?

    thanks 🙂

  5. Very original concept and nicely coded too. It seems very appropriate for a mobile site too. Did anyone tried it on a tablet?

  6. That looks nice: quite unusual. However, it is very difficult to use if (like me and many other people) you don’t use a mouse.

    There is no response to arrow keys (which users are learning to expect when they see arrow icons in a modal display or slide show), which leaves only tabbing to to each of the little squares and using the Enter key. It just about works, but is quirky and there is no focus indication (which is a big mistake).

  7. i think just mary lou in here…
    it turns out any other master 😀
    usually cool tut’s…
    Who’s that girl on demo photos 😀
    thanks^^

  8. Hey! I am ag2r and ur portofolio is so nice, I am glad for see my photos here, regards from Spain! =)

  9. First off thank you for this example.

    I have a question about the jquery part ( got some basic understanding)

    I am trying to figure out how the code figures out wicht picture i am viewing.

    i know that the “path”glow white on each specific item but i cant get my head around it how this exaclty works in this code.

    any advice would be appreciated, anyhow thx for this

  10. this is a rocking tutorial. the demo itself is something i’ve not seen before so kudos!!

  11. Hello there … Amazing script as always!
    I have a small newbie question…
    How can I dynamically name the categories that are created?For example to display the name of each album.

    Thanks in advance 🙂

  12. awsome 🙂

    haven’t even seen tgis kind of gallery before.

    still, zoom function could be added (if possible)

    great!!

  13. This tutorial and files really helped me, thank you very much. I have been browsing through many websites for similar stuff and yours definitely beats them in both explanation and design.

  14. I’m having issue making the images full screen…has anybody had luck or have a suggestion how to?

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

  15. 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)?

  16. 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?

  17. 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.