Articles

Simple Image Viewer

14 Aug 2009 / 114 comments

Image Viewers are fairly common on websites now-a-days. In this tutorial we'll cover how to create a image viewer using CSS, HTML and a touch of jQuery. We will use jQuery builtin slideUp and slideDown functions to create an attractive effect.

You can see the final result at this page, and you can download the complete source code with examples from here.

Step 1: Create the Mark-up

Here I have created two columns - for navigation and output. For the sake of simplicity I use attribute rel for links to find corresponding image by id in output section.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.

<div id="gallery">
	<div id="gallery_nav">
		<a rel="img1" href="javascript:;"><img src="iphone_1.png" /></a>
		<a rel="img2" href="javascript:;"><img src="iphone_2.png" /></a>
		<a rel="img3" href="javascript:;"><img src="iphone_3.png" /></a>
		<a rel="img4" href="javascript:;"><img src="iphone_4.png" /></a>
	</div>
 
	<div id="gallery_output">
		<img id="img1" src="iphone_1b.jpg" />
		<img id="img2" src="iphone_2b.jpg" />
		<img id="img3" src="iphone_3b.jpg" />
		<img id="img4" src="iphone_4b.jpg" />
	</div>
 
	<div class="clear"></div>
</div>

Step 2: Quick CSS

The CSS is pretty simple, too. You may wonder why output images have property display: block;. Well, at my first attempt I did try to use display: none;. As result - slideUp and slideDown animations were flickering. After some experimenting I found that best solution is to set them as block elements. That did the trick and now animations are smooth.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

#gallery img {
	border: none;
}
 
#gallery_nav {
	float: left;
	width: 150px;
	text-align: center;
}
 
#gallery_output {
	float: left;
	width: 600px;
	height: 550px;
	overflow: hidden;
}
 
#gallery_output img {
	display: block;
	margin: 20px auto 0 auto;
}

Step 3: Simple jQuery

The jQuery is pretty much straight forward. First we hide all output images except first one. When user clicks on navigation links, we check if its referring image is hidden. If it is true, we proceed animations.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

$(document).ready(function() {
	$("#gallery_output img").not(":first").hide();
 
	$("#gallery a").click(function() {
		if ( $("#" + this.rel).is(":hidden") ) {
			$("#gallery_output img").slideUp();
			$("#" + this.rel).slideDown();
		}
	});
});

I absolutely love jQuery and it's amazing power. I hope you will enjoy this snippet.

View Demo - Download

User Comments

rzepak August 20th

Great tutorials! Simple but fresh, keep up good work :) cheers
jQueryGlobe August 20th

Thanks! :)
Josh August 21st

Simple but superb effect. Thankyou
Darshan August 21st

Hi good work done Just noticed one thing that this gal will not support more then 4 Images can u add some kind of scrolling navigation menu so it can take more images Regards Darshan
jQueryGlobe August 21st

@Darshan: If you wish to have scrolling navigation menu, you can use any of jQuery sliding plugins, for example - www.gmarwaha.com
Darshan August 24th

Well thanks will build on top of both this plugins and publish the same
Rachel August 24th

Not sure what Darshan meant, but I was able to get this viewer working with more than four images. My CSS and mark-up differ, but I'm using the jQuery bit without any modification with 8-images in total. Works marvelously. Looking forward seeing to more examples and tutorials.
Chris October 30th

Thank you for the tutorial! I can't seem to wrap my head around it but how would one change it to either just fade across images or toggle them with no animation at all?
Abe December 15th

I really like how simple this is. My question is: If I want to add more than one of these to a site (one content box under another), what do I have to edit in the jquery so that the images rotate within their respective content boxes?
Eric January 12th

This is perfect! But, doesn't seem to work with Firefox. I have it working in IE. Any idea why?
Elon February 18th

how can i add text?
Markus April 9th

I like it simple and good looking. Thanks.
berbert-pk April 26th

Hi, Thank you for this script, the most simple and fluid! But I need some help, I want replace the image by a table... It's possible?
MBarcala August 6th

Nice tutorial, I would like to know how to keep the thumbs selected every time I click on each one of them. can you show me any sample code please to fallow?
silver tiffany earrings September 3rd

@linds: Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.
cheap replica handbags September 3rd

i, Thank you for this script, the most simple and fluid! But I need some help, I want replace the image by a table... It's possible?