My previous how-to showed a new way to look at the slider function featured at the Apple.com/mac site. This one goes to Apple once again and their bucket ads shown in the iTunes Music Store (screen shot). The buckets are what I’m calling them. They are the three spots at the top of the music store which rotate graphics like the slideshow functions of many galleries. The difference is that these three take turns.

I was able to replicate this function using Scriptaculous on our beloved comic shop website (latest screen shot). But after a few years of constantly adding duct tape to the site, it was time to move everything to a single framework. And that mean making this triptych banner script run on jQuery. Hopefully without a lot of html recoding.

Make your list

For the html, set your divs with a ‘slide’ class and a position class. I guess you can do this in an unordered list, but whatever.

Set your positions

The easiest solution is to make the position classes absolute.

Good news, everyone! This script doesn’t need a plug-in.

I always start my script codes with an apology, so why stop now. I’m sorry.

The first part makes sure that the banners appear in the order that their written in html. Because of the absolute positioning, however, they stack on top of each other and the last will be on top.

Also, I didn’t like how i in jQuery’s each function started at 1 and not 0, but that’s just me.

This script should be able to make with any number of banners and any number of sets. This example just used a set of three, but your can make it a set of two, or four, or ten! Just make the list divisible by the set and fix your positions of course.

Putting it all together

See in action here Demo

Hopefully, I’ll get this to the Zeus Comics site very soon.