How to Create a Simple jQuery Gallery

Posted Thursday, November 8th, 2012 in Tutorials
How to Create a Simple jQuery Gallery

It’s become pretty commonplace to include jQuery galleries and sliders on websites. This surge in popularity has also brought tons of jQuery plugins on to the market.

The great thing about this is that you can usually find a good plugin for any effect you need. And if the plugin doesn’t fit your exact need, then you can usually adapt the plugin to fit your needs.

The only problem with many of these ready made plugins is that they are super bloated! That’s why I’d like to walk you through how to roll your own custom jQuery gallery :)

The Basic Implementation

Any time you build something, it’s a good plan to start small and build big. So, let’s go ahead and look at a minimal implementation of the gallery. Below is a screenshot of this simple gallery.Gallery Screen

 

Below is the code you can use to implement this gallery:

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>jQuery Gallery Sample</title>
</head>

<body>
	<section>
		<div id="gallery">
			<div id="feature"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" border="0"/></div>
			<a href="#" rel="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" class="galImg"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d_s.jpg" class="thumb" border="0"/></a>

			<a href="#" rel="http://farm4.staticflickr.com/3174/2646497124_3766a93c40.jpg" class="galImg"><img src="http://farm4.staticflickr.com/3174/2646497124_3766a93c40_s.jpg" class="thumb" border="0"/></a>

			<a href="#" rel="http://farm3.staticflickr.com/2525/4155192992_208137e337.jpg" class="galImg"><img src="http://farm3.staticflickr.com/2525/4155192992_208137e337_s.jpg" class="thumb" border="0"/></a>
		</div>

	</section>

	<footer>
		<p>Copyright © 2012 Eric Binnion</p>
	</footer>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>
		$(document).ready(function() {

			$(".galImg").click(function() {
				var image = $(this).attr("rel");
				$('#feature').fadeOut('slow');
				$('#feature').html('<img src="' + image + '"/>');
				$('#feature').fadeIn('slow');
			});
		});
	</script>
</body>

</html>

That’s a nice chunk of code. But don’t worry. All you have to worry about is the div#gallery and the jQuery within the document ready function. Not too bad, right?

So, this gives us a basic jQuery gallery that will update the main image any time one of the thumbnails is clicked.

Let’s Spruce It Up With Some CSS

With some basic CSS, we can really add some flavor to our gallery. Right now, I don’t like the feature image being on top and the thumbnails being below. So, let’s reposition the thumbnails to the left of the main image. Also, let’s go ahead and add a border to each of the images. Below is an image with the new gallery style. I also added a min-width to account for the varying height of the main image.

New Gallery Screenshot

And here is the code for this new implemenation:

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>jQuery Gallery Sample</title>
	<style>
		#gallery {overflow: auto; min-height: 470px;}
		.thumbs {width: 200px; float: left; }
		#feature {width: 600px; float:right; margin: 10px;}
		#feature img {border: 4px solid #ccc;}
		.thumb{border: 4px solid #ccc; margin: 4px;}
		footer p{text-align: center}
	</style>
</head>

<body>
	<section>
		<div id="gallery">
			<div id="feature">
				<img src="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" border="0"/>
			</div>

			<div class="thumbs">

				<a href="#" rel="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" class="galImg"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d_s.jpg" class="thumb" border="0"/></a>

				<a href="#" rel="http://farm4.staticflickr.com/3174/2646497124_3766a93c40.jpg" class="galImg"><img src="http://farm4.staticflickr.com/3174/2646497124_3766a93c40_s.jpg" class="thumb" border="0"/></a>

				<a href="#" rel="http://farm3.staticflickr.com/2525/4155192992_208137e337.jpg" class="galImg"><img src="http://farm3.staticflickr.com/2525/4155192992_208137e337_s.jpg" class="thumb" border="0"/></a>
			</div>
		</div>

	</section>

	<footer>
		<p>Copyright © 2012 Eric Binnion</p>
	</footer>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>
		$(document).ready(function() {

			$(".galImg").click(function() {
				var image = $(this).attr("rel");
				$('#feature').fadeOut('slow');
				$('#feature').html('<img src="' + image + '"/>');
				$('#feature').fadeIn('slow');
			});
		});
	</script>
	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

</html>

Where To Go From Here?

There are many ways to make this gallery better. For instance, I would like to add a delay in between each thumbnail click so the calls to update the main image don’t stack on each other. Also, it would be nice to have a pagination feature if there were more images than would fit in the thumbnails container. A much better design with CSS could be achieved as well.

What do you think would make this basic jQuery gallery better?

One Response to “How to Create a Simple jQuery Gallery”

  1. jeff says:

    can you put up a demo button so we can see it in action? Thanks!

Leave a Reply