Creating a jQuery Slideshow – Adding Multiple Slideshows to a Page

jQuery Slideshow | Programmers

In this post series we’re creating a jQuery Slideshow from scratch. In this post we’ll be changing the coding so that we can add more than one slideshow to a page. This post will deal with adding some options, but the sizes of the slideshow will (for this post) be the same.

Example: See jsFiddle at the bottom of this post. Note: The jsFiddle at the bottom of this post is a composite of all previous posts (Thumbnail navigation option 2) on this jQuery Slideshow.

jQuery Slideshow Tutorials

[list_category name=”jQuery Slideshow”]

Basic Overview of What We’re Doing

We’ll be taking the coding from the previous slideshows and putting almost the entire javascript within a function. Then we’ll call the function, passing variables. Finally we’ll use an outer unique Div id to control the slideshow that moves.

Step 1 – Moving jQuery to inside a Function

Previously, we had everything loaded directly under the document ready tags:

$(document).ready(function () {

Instead, we’re going to leave the document tag empty, and move the jQuery, starting with the “//adding images to the thumbnails” section, to a function we’ll call startSlideshow().

function startSlideshow() {
//adding images to the thumbnails
$.each(images, function (index, value) {
        $(' #imageHolder').append('<img src="' + value + '" />');
    });
}

Make sure you move all the jQuery into this function (not just the part above). To see the whole code, check out the jsFiddle at the bottom of the post.

Dynamically Create the HTML

Next we’ll change the static HTML in our slideshow. First, we’ll remove all the static HTML. Instead, add a Div with a unique ID. You can add as many of these as you’d like; just make sure the ID is unique. Each Div will become it’s own unique slideshow.

<div id="total"></div>

Next, go back to the jQuery and recreate the HTML (that we deleted) using jQuery:

 //dynamically create slideshow Divs
    $('#'+holderDiv).prepend('<Div id="holder"><div id="leftArrowD"><img src='+leftA+' id="leftArrow" /></div><div id="rightArrowD"><img src='+rightA+' id="rightArrow" /></div><a href="" id="slideshowA"><img src="" id="slideshow" /></a><div id="description"></div>   <div id="descriptionBack"></div></div><div id="thumbnails"><div class="thumbnailArrows"><img src="'+thumbL+'" id="Tleft" /></div><div id="window"><div id="imageHolder"></div></div><div class="thumbnailArrows"><img src="'+thumbR+'" id="Tright" /></div></div>');

Besides making sure you get all the single/double quotes correct, this section is where we’re going to need variables:

  • holderDiv – variable for the Div ID
  • leftA – variable for the image source for the left arrow
  • rightA – variable for the image source for the right arrow
  • thumbL – variable for the image source for the left arrow
  • thumbR – variable for the image source for the right arrow

Set up the Variables

We’ll need to set up the function to pass some variables. To do that, add the variable name to the parenthesis following the function name:

function startSlideshow(holderDiv, leftA, rightA, thumbL, thumbR, ThumbnailNum, links, images, descriptions, speed) {}

Note that we pass 5 additional variables here. We’ll add these into the coding in the next section.

Call the Function to Make the Slideshow

To make the slideshow actually work, we’ll need to call it within the document ready tags:

$(document).ready(function () {
    startSlideshow('total', 'http://kimjoyfox.com/blog/wp-content/uploads/arrowLeftGrey.png', 'http://kimjoyfox.com/blog/wp-content/uploads/arrowRightGrey.png', 'http://kimjoyfox.com/blog/wp-content/uploads/leftA.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/rightA.jpg', '6', links, images, descriptions, '4000');
});

Each variable is passed by either adding text within single apostrophes, or by adding already created variables like the Javascript arrays for links, images, and descriptions.

Using the Variables in the Javascript

We’re almost done! We need to do two things in the Javascript function startSlideshow we created.

First, we need to add a reference to the holderDiv to each portion so that we reference the right slideshow. Remember, the holderDiv is the unique ID of the Div that “holds” each slideshow.

Second, we’ll replace a few items with those other variables.

I’m not going to add all the new Javascript here. Instead, take a look at the jsFiddle below for the final coding.

Comments
  • akshay.bramhane says:

    Hi Kim,

    This is probably the best “Tutorial” on image slider I have ever seen over the net.
    Thanks for such a great post!

    However, I was just wondering what changes should be made to the code if I want to replace the images by “DIV”.

    I want to build a “DIV” Slider instead of images. I can pass other content to these DIVs then.

    Can you please suggest something?!

    Thanks Again!

    • Kim Joy Fox says:

      Thank you!
      Switching it to Divs would be a bit of work, but I’d say the general idea would be replacing all the images with Divs, and then making sure you’re referencing them correctly. That being said, it really depends on what you’re putting inside the Divs and how you want to load that information – all at once, or right before each Div loads.
      That’s a good idea though for future tutorials!

      • akshay.bramhane says:

        Hi Kim,

        Yes, It would be great if you could come up with a “DIV SLIDER”.
        And it would be awesome if that happens really soon ;).
        I am scratching my head doing that. I always miss out on something.:(
        So I would personally like to see such a tutorial from you on such a slider!

  • akshay.bramhane says:

    Hi Kim,

    One more doubt in the above code.

    how can we make a particular thumbnail, which is being displayed , to be bordered so as to distinguish it from other thumbnails and to make it obvious that this is the thumbnail being displayed.

    • Kim Joy Fox says:

      It’d be best to add this to another function to call every time you click the thumbnail (//Clicking Thumbnail functionality in the Javascript coding). Basically, you’d create something like the descriptionChange function, except you remove all the borders except the image you just clicked on. I’ll do a post on it!