jQuery Triptych Slideshow

My pre­vi­ous how-​to showed a new way to look at the slider func­tion fea­tured at the Apple​.com/​mac site. This one goes to Apple once again and their bucket ads shown in the iTunes Music Store. The buck­ets are what I’m call­ing them. They are the three spots at the top of the music store which rotate graph­ics like the slideshow func­tions of many gal­leries. The dif­fer­ence is that these three take turns.

I was able to repli­cate this func­tion using Scriptaculous on our beloved comic shop web­site. But after a few years of con­stantly adding duct tape to the site, it was time to move every­thing to a sin­gle frame­work. And that mean mak­ing this trip­tych ban­ner script run on jQuery. Hopefully with­out a lot of html recod­ing.

Make your list

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

<div class="slide pos1"><a href="link1"><img src=""></a></div>
<div class="slide pos2"><a href="link2"><img src=""></a></div>
<div class="slide pos3"><a href="link3"><img src=""></a></div>

<div class="slide pos1"><a href="link4"><img src=""></a></div>
<div class="slide pos2"><a href="link5"><img src=""></a></div>
<div class="slide pos3"><a href="link6"><img src=""></a></div>

Set your positions

The eas­i­est solu­tion is to make the posi­tion classes absolute.

.pos1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

.pos2 {
    position: absolute;
    left: 210px;
    top: 0px;
}

.pos3 {
    position: absolute;
    left: 420px;
    top: 0px;
}

Good news, every­one! This script doesn’t need a plug-​in.

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

The first part makes sure that the ban­ners appear in the order that their writ­ten in html. Because of the absolute posi­tion­ing, how­ever, 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() func­tion started at 1 and not 0, but that’s just me.

$(document).ready(function(){
    var slideCount = $('.slide').size() - 1;
    $('.slide').each(function(i) {
        $(this).css('z-index', slideCount - i);
    });

    var currentSlide = slideCount;
    var zIndex = 0;

    function imgRotate() {
        $('.slide').each(function(i) {
            if($(this).css('z-index') == currentSlide)
            {
                $(this).fadeOut('slow', function() {
                    $(this).css('z-index', (0));
                    $(this).show();
                });
            }
            else
            {
                zIndex = $(this).css('z-index');
                zIndex = parseInt(zIndex) + parseInt(1);
                $(this).css('z-index', (zIndex));
            }
        });
    }

    setInterval(imgRotate, 4000);

});

This script should be able to make with any num­ber of ban­ners and any num­ber of sets. This exam­ple just used a set of three, but your can make it a set of two, or four, or ten! Just make the list divis­i­ble by the set and fix your posi­tions of course.