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

From our sponsor: Elementor, a design oriented WordPress website builder for pros

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.

http://playground.mobily.pl/

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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! =)