jQuery: vertical slideshow for products

by lovromar

HTML

<div id="products">
    
    <div id="products-wrapper">
        <div id="products-container">
        <img src="https://lh6.googleusercontent.com/-bMhvREdJOC4/UIAdeSmo0wI/AAAAAAAABHY/33vvtv1LI_8/s200/1.jpg" alt=""/>
        <img src="https://lh3.googleusercontent.com/-GsjcdJi1JL8/UIAdfWlxBuI/AAAAAAAABHM/JkhlmDrLnyQ/s267/2.jpg" alt=""/>
        <img src="https://lh5.googleusercontent.com/-UY0pO2qhT6E/UIAdf8IhecI/AAAAAAAABHM/JrBq8hMXVcQ/s200/3.jpg" alt="" />
        <img src="https://lh3.googleusercontent.com/-Aq9AtqiSiwo/UIAdhNW2ICI/AAAAAAAABHM/bTWfchQgOME/s301/4.jpg" alt=""/>
        </div>
    </div>
        
    
    <div id="thumb-nav">
        <a href="#" data-rel="0"><img src="https://lh4.googleusercontent.com/-RNK2HnSjeY4/UIAdeV_WleI/AAAAAAAABHM/f0CSm0fdsps/s100/1-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="1"><img src="https://lh6.googleusercontent.com/-NLkErcaCwp4/UIAdebMolxI/AAAAAAAABHM/pf9VZrqJ48E/s134/2-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="2"><img src="https://lh5.googleusercontent.com/-_6qQoaCReig/UIAdfpUeyQI/AAAAAAAABHM/v4wxkVQubIM/s100/3-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="3"><img src="https://lh6.googleusercontent.com/-4S9fasDur8E/UIAdg0l2kmI/AAAAAAAABHM/6JTq7ue1CtU/s151/4-thumb.jpg" alt=""/></a>
    </div>
</div>

CSS

#products {
    width: 100%;
    margin: 2em auto;
    max-width: 600px;
}

#products-wrapper {
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    width: 400px;
    position: relative;
}

#products-container {
    position: relative;
}

#products-wrapper img {
    display: block;
    margin: 0 auto;
    position: relative;
}

#thumb-nav {
    height: 100px;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 1.5em;
    background: #eee;
}

#thumb-nav img {
    display: inline-block;
    margin-right: 0.5em;
}

JavaScript

var Slideshow = {

    setHeight: function() {

        var $img = $('img', '#products-wrapper');
        var total = 200 * $img.length;

        $('#products-container').height(total);



    },

    slide: function() {

        $('a', '#thumb-nav').on('click', function() {

            var $a = $(this);
            var $image = $('img', '#products-wrapper').eq($a.data('rel'));

            $('#products-container').animate({
                top: -$image.position().top
            }, 500, 'easeOutBounce');



        });

    },

    init: function() {
        this.setHeight();
        this.slide();
    }

};

Slideshow.init();