Test

by Alma Grace

HTML

Click on one of the images ...
<div id="wrapper">
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" />
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
</div>
<a href="http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/" target="_blank">find out more</a>

CSS

body {
    background-color: #000;
    font-family:"Georgia", "Times New Roman", serif;
    font-size: .8em;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}
h1 {
    font-size: 1.7em;
    line-height: 150%;
}
#wrapper {
    position: relative;
    height: 320px;
    width: 280px;
    margin: 15px auto;
}
img {
    position: relative;
    float: left;
    padding: 0;
    margin: 5px;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    border: solid 2px #FFFAF2;
    border-bottom: solid 15px #FFFAF2;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}
a {
    color: #FFFFFF
}

JavaScript

-
if (last) {
    $that.trigger('stackfinished');
}
});
};
})(jQuery);
//END PLUGIN


/*
 *    Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
 *    NOT required but recommended.
 */
jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    }
});


//Usage
$('#wrapper').elementStacks({
    'transaction': 'easeOutBack',
        'initialCollapse': true
});