Why Aren't You Using jQuery: PART 3

Jeffrey Jordan Way 05/21/2008 34 Comments jQuery

In this third lesson, we are going to create a "flash-like" image gallery with the help of jQuery. We'll have a list of large images. When the user clicks on one of these images, we will display it in a div. While the image is loading, a "loading" animated gif will display. Depending on how fast your connection is, you may or may not see the gif. View the simple example HERE.

The Semantic Markup

Before we begin, we must create the html. We might as well do it the most semantic way possible. First, import your jQuery script.

<script src="js/jquery.js" type="text/javascript"></script>

Then, add the images.

  <div id="container">

        <div id="loader">

        <h3>Click on an image to view it full size.</h3>

        </div>

        <ul id="imageOptions">

            <li><a href="#"><img src="img/1.jpg" alt="image" /></a></li> 

            <li><a href="#"><img src="img/2.jpg" alt="image" /></a></li> 

            <li><a href="#"><img src="img/1.jpg" alt="image" /></a></li> 

            <li><a href="#"><img src="img/2.jpg" alt="image" /></a></li> 

            <li><a href="#"><img src="img/1.jpg" alt="image" /></a></li> 

        </ul>

    </div>

The div with an id of loader is just a white box containing the text from the h3 tag. This will be the div that shows the large version of the image that the user chooses. The imageOptions div will be floated to the right and will contain thumbnails of all the available choices. For the sake of the example, I just have two large images that repeat.

The Outline

"When the user clicks on an image, we need to get rid of the text. Then we need to display the animated gif which tells the user that the image is currently loading. When the image has loaded, we want to remove the animated gif. Finally, we want to slowly fade in the new image."

Implementing the jQuery

I will recommend that you create a new .js file and then import it into your main html page. For example...

<script src="js/imageGallery.js" type="text/javascript"></script>

Paste the following into your javascript file.

$(function()

{

    $("#imageOptions a").click(function()

        {

        var imageSource = $(this).children("img").attr("src");



        $("#loader").addClass("loading");

        $("h3").remove();

          showImage(imageSource);

          return false;

        });

});



function showImage(src)

{

$("#loader img").fadeOut("slow")

                .remove();

var largeImage = new Image();

$(largeImage).attr("src", src)

             .load(function()

                     {

                $(largeImage).hide();

                $("#loader").removeClass("loading")

                            .append(largeImage);

                $(largeImage).fadeIn("slow");                      

                });                                                                       

}

Now, let's take each line step by step.

    

    $(function()

This is shorthand for "$(document).ready(function{});"

  

    $("#imageOptions a").click(function()

When the user clicks on an anchor tag that is within an element with an id of "imageOptions", run a function.

var imageSource = $(this).children("img").attr("src");

"Find all img child elements of the anchor that the user clicked on.  Then grab the source of that specific image.

$("#loader").addClass("loading");

Get the element with an id of "loader" and add a class called "loading" to it. Our CSS file will contain a background image of the animated gif.

.loading

{

    background: url('../loadingIcon.gif') no-repeat 50% 50%;

    height: 100%;

    width: 100%;

}

$("h3").remove();

Here, we are removing the level three heading tag. We don't want the text to show up when an image is revealed.

showImage(imageSource);

We are now calling a function called "showImage". We'll pass in one parameter - "imageSource". "imageSource", if you remember from a few lines above, is equal to the source url of the image that was clicked on.

Now, we need to create the "showImage" function. This function will accept one parameter. That parameter needs to contain the url to the source of the image that was clicked on.

function showImage(src)

We create the new function.

$("#loader img").fadeOut("slow")

                .remove();

Wrap the images that are children of an element with an id of "loader". Then, fade them out slowly. Let's say that an image is already displaying when a new image is clicked. That large image will fade out...and the new image will fade in!

var largeImage = new Image();

Here, we are creating a new variable called "largeImage".

$(largeImage).attr("src", src)

Now that we've dynamically created a new image, we need to add the source attribute to it. We are setting the "src" property equal to the a parameter that we received when the "showImage" function was called.

.load(function()

Next, we load the image.

$(largeImage).hide();

If we want the image to dramatically fade in, we'll need to initially hide it.

$("#loader").removeClass("loading")

When the image has fully loaded, we want to get rid of the animated gif. We do this by removing the class("loading") that has the gif as its background.

.append(largeImage);

Almost finished! Here we are adding the new image to the bottom of the "loader" element.

$(largeImage).fadeIn("slow");                      

Lastly, we create a smooth transition by slowly fading in the new image.

VIEW THE FINAL PRODUCT.

READ PART 1
READ PART 2
READ PART 2.5

Download the revised source code.