Sliding Stacked Images With JQuery

May 14th, 2011 by aditia rahman / 8 Comments  

     

A sliding door effect can be used what the site offer. About a week ago I visited a site called auroraos, on the first page I see a nice sliding image gallery on the front page, it used JQuery to creating the effect, it like a vertical accordion, sliding door effect or whatever you called it.

jquery sliding stacked images

All the images must have the same size, in both width and height, the hovered images will shows entirely, and the others will mostly hidden.

View Demo | Download Source

HTML

In this example I’m using 5 images, like before we have to set the overflow css property to hidden so all the images can be expanded in the background, you can see on the CSS code section.

<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
    </div>
</div>
JQuery

This example set all the images position using JQuery, on the $(document).ready(); function, to make it easier where to move the images when an images hover, I set all the position in array. And there is two recursive function i used here, they are used when JQuery must loop on the prev and next images until no images found anymore.

$(document).ready(function() {
    var cwidth = parseInt($("#container").css("width").replace("px", ""));
    var img_count = $("#img_container").children().length;
    var img_width = $("#img1").width();
    var divider = cwidth / img_count;
    var small_space = (cwidth - img_width) / (img_count - 1);

    // set position
    var cssleft = Array();
    $("#img_container img").each(function(index) {
        cssleft[index] = new Array();
        // set default position
        cssleft[index][0] = (index * divider) - (index * img_width);
        $(this).css("left", cssleft[index][0] + "px");

        // set left position
        cssleft[index][1] = (index * small_space) - (index * img_width);

        // set right position
        var index2 = index;
        if (index2 == 0) {
            index2++;
        }
        cssleft[index][2] = cssleft[index2 - 1][1];
    });

    // image hover
    $("#img_container img").mouseenter(function() {
        var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;

        if ($(this).attr("id") != "img1") {
            $(this).animate({
                left: cssleft[img_id][1]
            }, 300);
        }
        loopNext(this);
        loopPrev(this);
    });

    // image container hover out back to default position
    $("#img_container").mouseleave(function() {
        $("#img_container img").each(function(index) {
            $(this).animate({
                left: cssleft[index][0]
            }, 300);
        });
    });

    function loopPrev(el) {
        if ($(el).prev().is("img")) {
            var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

            if ($(el).prev().attr("id") != "img1") {
                $(el).prev().animate({
                    left: cssleft[imgprev_id - 2][1]
                }, 300);
            }
            loopPrev($(el).prev());
        }
    }

    function loopNext(el) {
        if ($(el).next().is("img")) {
            var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

            $(el).next().animate({
                left: cssleft[imgnext_id][2]
            }, 300);
            loopNext($(el).next());
        }
    }
});
CSS

I’m using the box shadow effect to the space between each image, so not to get confused.

#container {
    margin: 0 auto;
    margin-top: 50px;
    width: 800px;
    height: 350px;
    overflow: hidden;
    border: 10px solid #000;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_container {
    width: 4000px;
}
#img_container img {
    position: relative;
    -moz-box-shadow: -5px 0 10px #000;
    -webkit-box-shadow: -5px 0 10px #000;
    box-shadow: -5px 0 10px #000;
    width: 600px;
}
#img1 { z-index: 0; }
#img2 { z-index: 1; }
#img3 { z-index: 2; }
#img4 { z-index: 3; }
#img5 { z-index: 4; }

View Demo | Download Source

jquery sliding stacked images

        submit to reddit Delicious

8 Comments Leave a Comment Subscribe RSS

Leave a Comment