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:

HTML

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="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></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="http://www.neurosciencemarketing.com/blog/wp-content/photos/smiley1.jpg" />
    </div>
    <div id="thumbs"></div>
</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.

CSS

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.

JavaScript

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("http://www.neurosciencemarketing.com/blog/wp-content/photos/smiley1.jpg",
    "http://2.bp.blogspot.com/-eRryNji1gQU/UCIPw0tY5bI/AAAAAAAASt0/qAvERbom5N4/s1600/original_smiley_face.png",
    "http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png");

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.

2 thoughts on “Psycho Random Animation

  1. I see a lot of interesting content on your blog.

    You have to spend a lot of time writing, i know how to
    save you a lot of time, there is a tool that creates unique, SEO friendly posts in couple of seconds,
    just search in google – k2 unlimited content

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>