Creating a jQuery Slideshow – Adding Descriptions

October 3, 2012
Developers
LinkedInTwitterFacebookEmail
This post is part of a post series called jQuery Slideshow
  1. jQuery Slideshow - Options for Setup
  2. Creating a jQuery Slideshow From Scratch - Part 1
  3. Creating a jQuery Slideshow: Adding Arrow Navigation
  4. Creating a jQuery Slideshow - Styling with CSS
  5. Creating a jQuery Slideshow - Adding Descriptions
  6. Creating a jQuery Slideshow - CSS for Descriptions
  7. Creating a jQuery Slideshow - Setting up Thumbnails
  8. Creating a jQuery Slideshow - Clicking on Thumbnails
  9. Creating a jQuery Slideshow - Adding Thumbnail Navigation
  10. Creating a jQuery Slideshow - Adding Links to the Images

In this post series we’re creating a jQuery Slideshow from scratch. In the last post we added CSS and a nice jQuery hover effect on the arrows. In this post we’ll add descriptions to the current slideshow.

Note: The jsFiddle at the bottom of this post is a composite of all previous posts on this jQuery Slideshow.

 Setting Up the Descriptions

We’re going to keep the descriptions area nice and easy. To start, we’ll need an array for the descriptions into our Javascript:

descriptions = ['Image 1', 'Image 2', 'Image 3', 'Image 4', 'Image 5', 'Image 6'];

Like I said… nice and easy! Next we’ll add to the CSS:

#description { width:300px; }

Finally, we’ll add that Div to the HTML. Add this at the bottom of our other HTML (see jsFiddle at the bottom for more help):

<div id="description"></div>

And we’re ready to add the magic!

The Magic (ie. jQuery) – On Load

The first thing we need to do is make sure the first description shows up when we load the page. There are multiple ways of doing this, especially if you’re pulling information out of a database, but since our descriptions are in the Javascript, we’ll use jQuery to set this.

$('#description').html(descriptions[0]);

The .html is a great little function in jQuery. It simply adds the text from our array (descriptions) and replaces the current html(text) within the description Div. Now currently, there’s nothing else in that Div – it’s empty. But we’ll be using this little guy later on to replace the information within that Div.

The jQuery Function

Since we’re creating this slideshow as though we were using Object Oriented programming, we never want to repeat our coding. To accomplish that, we’ll add all the coding for the descriptions into a function.

//function for changing the description
    function descriptionChange(newDescript){
        $('#description').stop().animate({
            opacity: 0,
        }, 200, function() {
            $('#description').html(descriptions[newDescript]);
            $('#description').animate({
                opacity: 1,
            }, 200)
        })
    }

Notice this function gets one variable – newDescript. That’s because we’ll need to know which description in the array to display.

The actual function is pretty straight-forward. We tell the description Div to fade out (opacity:0) at a speed of .2 seconds to complete, then we tell it to change the HTML in the description Div to the new description (using our variable), and finally, we animate the Div back in at the same speed.

Calling the Function

Now that we’ve got the function, we’ll need to figure out where to call it. There are a few options, but keep in mind, we’ll need the current image ID to pass to our function.

Because of that, we’re going to add the function call to backwardsImage() and forwardImage() functions.

//This function will move the slideshow backwards one
    function backwardsImage() {
        currentImageKey();
        if (i == 0) {
            //changeImage(images.length - 1);
        } else {
            changeImage(i - 1);
        }
        descriptionChange(i-1);
        checkArrows(i-1);
    }
//This function will move the slideshow forward one
    function forwardImage() {
        currentImageKey();
        if (i < images.length - 1) {
            changeImage(i + 1);
        } else {
            //changeImage(0);
        }
        descriptionChange(i+1);
        checkArrows(i+1) ;
    }

We call the function on Line 9 and 21. Notice one weird thing here: we aren’t just passing the variable i (which is the currentImageKey).  We’re actually adding one or subtracting one to it. That’s because although we’re getting the current image’s ID, we aren’t getting the new one, the one that we’re changing to. So we’ll need to add/subtract one from this ID to get the new image’s ID.

The idea is basically the same as the images in the slideshow, with just a few tweaks. Check out the jsFiddle below for all the coding.

Join the Discussion

Your email address will not be published.

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=""> <s> <strike> <strong>