Simple Image Gallery Using jQuery

There are surely multitudes of plugins for displaying sets of images, and many of them are confusing to say the least. This tutorial will accomplish the same thing as do those plugins, the difference being that this method is not quite as “pretty”. However, the simple and minimalistic design of both the output and the code allow for a rather usable script.

The Images

For this tutorial, we’re going to use the following images as our example gallery:


As with most of my recent posts, this tutorial will utilize the JavaScript library jQuery, which can be included as follows:

<script type="text/javascript" src="//"></script>

Next, you can add the following two lines of HTML to your page. This is all the HTML we’ll need.

<div id="gallery-wrapper">
    <div id="main-container">
        <img id="main-image" src="" />
    <div id="thumbs"></div>

Notice how we didn’t supply a width or height parameter for the image tag. We’ll do that using CSS so that everything remains constant. Also, we used the URL for the first smiley as the source parameter.


As with most tutorials, we’ll need some CSS to make our gallery look good.

First, we want to make sure that our images don’t form a single row that goes on forever. So, we’ll limit the width of the gallery wrapper:

div#gallery-wrapper {
    width: 300px;
    height: auto;

Since the gallery could have any number of images, we have a dynamic height.

Next, we’ll style the main image. This will be accomplished in two ways.

First, we ensure that the image takes up the same amount of space no matter its dimensions:

div#main-container {
    width: 300px;
    height: 300px;
    text-align: center;

We also set the text alignment to center so that tall images are centered horizontally in the container.

Next, provide the main image with a maximum height and width. This will ensure a limited size but will not stretch the image.

img#main-image {
    max-width: 300px;
    max-height: 300px;
    vertical-align: middle;

The vertical-align attribute aligns content to the center vertically so that our image is centered vertically.

Next, add this CSS:

img.thumb {
    vertical-align: middle;
    width: 100px;
    height: 100px;
    cursor: pointer;

While we don’t have any image tags with the class “thumb”, we’ll be using jQuery to add them later on.


The first step in the JavaScript is to create an array of the URLs of all the images we are going to display:

var imgArray = new Array("",

It’s simply an array of the URL of each image that we are displaying in our gallery.

As always, don’t forget to encapsulate everything in the following block:

$(document).ready(function() {
    //Put the rest of code here

In order to add an image tag for each of the URLs, we’ll use a for loop, cycling through the array:

for (var i = 0; i < imgArray.length; i++) {
    $('div#thumbs').append('<img class="thumb" src="' + imgArray[i] + '" />');

It’s important to note that the parameters in the for loop are separated by semicolons (;) and not commas (,). Line 2 dictates that for each URL in imgArray, we append an image tag with class “thumb” and source of the URL.

Our last step is to display an image as the main one when it is clicked. We start of with the click event:

$('img.thumb').click(function() {

Inside this block, we’ll first get the source URL of the image that was clicked:

var sourceURL = $(this).attr('src');

Next, we use fadeTo to fade the main image out.:

$('img#main-image').fadeTo('normal', 0, function() {
    $('img#main-image').attr('src', sourceURL);

The main image first fades to an opacity of 0 at a speed of ‘normal’ (400 milliseconds). The third parameter is a callback function, or a function that is executed when the fading finishes. The callback function above simply sets the source attribute of the main image to sourceURL, the variable we created previously.

Lastly, we have to fade the main image back in:

$('img#main-image').delay(100).fadeTo('normal', 1);

As you can see, we have a 100-millisecond delay before fading the image back in to an opacity of 1. This is to allow the image to load, and it is unnoticeable by visitors.

Now, test your page. If it doesn’t match ours, review your code (and mine) for errors, or leave a comment! You can always download the source.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>