jQuery Slideshow – Options for Setup

Programmers

When creating a jQuery slideshow ex nihilo, there are several options for setting the entire thing up. You’ll definitely want to think carefully about this because the rest of your coding will hinge on what you choose.

I’m sure the following options are not the only ones when it comes to the organization of the slideshow, but they’re my favorite and they’re easy to work with and understand.

The “Window”

The “Window” jQuery slideshow setup is aptly named because it shows the images through a “window” Div.

jQuery Slideshow Window Images

All the images are loaded into the “Image Holder” Div, which expands (width) as much as needed. This Div will need to be absolutely positioned so that you can move it when the user clicks the Right arrow (shown above). Additionally, this Div will actually be inside of the “Window” Div.

The “Window” Div is absolutely positioned ABOVE (z-index is higher) the “Image Holder” Div, and has a clear background and a set width. “Overflow” must be set to “hidden” so that the only images that are showing are those inside the “Window” Div area. Take into consideration the height of the images, the height of the “Image Holder” Div and the “Window” Div; they can all be the same, or off set like the image above: your choice.

Additionally, the arrows on this slideshow (right and left- which is not shown) need to float outside of the “Window” Div, on top of the “Image Holder”.

To move this slideshow, we’ll use the CSS property “left” of the “Image Holder” Div. Usually this is done by calculating the width of the images, the width of the margin in-between the images, and the current “left” property of the “Image Holder” Div.

This is a fairly common solution, but, while I originally wanted to recommend this to new jQuery users, I’m not so sure, after writing this tutorial, that it’s the easiest solution. There’s tons of math involved to move the images and sometimes it gets a little pesky.

Doin’ It AJAX Style

AJAX can do some beautiful things; slideshows are definitely one of them. If you’ve never worked with AJAX before, don’t worry; the basic implementation is relatively simple. The idea is that you’re loading partial information into a specific Div instead of reloading the total page. If you haven’t used AJAX before, check out this article.

AJAX Slideshow

Notice the “Slideshow” Div is no longer a Window. The images are actually simply loaded into the Div itself. Only the first ‘x’ number of images are loaded (say about 9 in the Div above). When the user clicks on the right/left arrow, jQuery calculates where it is in the pictures and how many there are left to load, and then dynamically loads starting there.

For example, if we fit 9 images in the “Slideshow” Div above, when the user clicks the right arrow, jQuery automatically finds 9 images inside of the “Slideshow” Div, and then loads the next pictures starting with number 10.

There are several awesome things about this method: first, you can always make sure that the first image doesn’t have any margin before it, which is a challenge in the method above; second, for large slideshows, this lowers the loading time; third, it is much easier to add a feature like loading one image after another using this method; and last, the math involved here is significantly less intense.

Summary

It’s up to you to choose a method you feel comfortable with to create your custom slideshow. I’ve done slideshows using both of the methods above and they’ve come out “smashing” (as the Brits say). The important thing is making sure you decide before you start building because, as A.A. Milne* says

“Organizing is what you do before you do something, so that when you do it, it is not all mixed up.”

Brilliant.

*Creator of Winnie-the-Pooh. That’s right, I just quoted the guy who created Winnie-the-Pooh on a tech blog.

 

Comments