JQuery Expand Stacked Images Using Slider

This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the JQuery UI slider

View Demo | Download Source

The skeleton html code, in this example 8 images are used

<div id="container">
    <div id="slider"></div>
    <br/>
    <div id="images">
        <img class="img_main" src="img/01.jpg"/>
        <img class="img" src="img/02.jpg"/>
        <img class="img" src="img/03.jpg"/>
        <img class="img" src="img/04.jpg"/>
        <img class="img" src="img/05.jpg"/>
        <img class="img" src="img/06.jpg"/>
        <img class="img" src="img/07.jpg"/>
        <img class="img" src="img/08.jpg"/>
    </div>
</div>

The default CSS style, to creating stacked look, I make each margin of the images to -90px.

#container {
    padding: 50px;
    margin-top: 20px;
}
#images {
    padding: 40px;
}
#images img {
    margin-left: -100px;
    background: #e9e9e9;
    padding: 10px;
    cursor: pointer;
}
#images img:hover {
    background: #333;
}
#slider {
    width: 380px;
}

Now the jquery code, the slider becoming useful for for increasing or decreasing the margin in each images, except the first image, I make it different style, and a click function just to make the image flipped to the default position.

$(function() {
    $( "#slider" ).slider({
        value: -100,
        min: -100,
        max: 0,
        step: 1,
        slide: function( event, ui ) {
            $(".img").css("margin-left", ui.value + "px");
        }
    });

    $("img").rotate3Di(45);

    $("img").click(function() {
        var str = $(this).attr("style");
        var index = str.indexOf("skew");
        var substr = str.substr(index+5, 10);
        var split = substr.split(", ");
        var val = parseFloat(split[1])
        if ((val == 0)) {
            $(this).rotate3Di(45, 1000);
        } else {
            $(this).rotate3Di(0, 1000);
        }
    });
});

And don’t forget to include all the css styles, jquery and the plugins

<link rel="stylesheet" href="js/theme/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>

View Demo | Download Source