JQuery Thumbnail Scroller without Plugin

http://www.dte.web.id/2012/09/thumbnail-scroller.html

by Taufik Nurrohman

HTML

<div id="thumbnail-scroller">
    <div class="container">
        <figure><a title="Caption 1" href="#"><img src="http://lorempixel.com/100/120/food/1" alt=""/></a>

        </figure>
        <figure><a title="Caption 2" href="#"><img src="http://lorempixel.com/100/120/food/2" alt=""/></a>

        </figure>
        <figure><a title="Caption 3" href="#"><img src="http://lorempixel.com/100/120/food/3" alt=""/></a>

        </figure>
        <figure><a title="Caption 4" href="#"><img src="http://lorempixel.com/100/120/food/4" alt=""/></a>

        </figure>
        <figure><a href="#"><img src="http://lorempixel.com/100/120/food/5" alt=""/></a>

        </figure>
        <figure><a title="Caption 6" href="#"><img src="http://lorempixel.com/100/120/food/6" alt=""/></a>

        </figure>
        <figure><a title="Caption 7" href="#"><img src="http://lorempixel.com/100/120/food/7" alt=""/></a>

        </figure>
        <figure><a title="Caption 8" href="#"><img src="http://lorempixel.com/100/120/food/8" alt=""/></a>

        </figure>
        <figure><a title="Caption 9" href="#"><img src="http://lorempixel.com/100/120/food/9" alt=""/></a>

        </figure>
        <figure><a title="Caption 10" href="#"><img src="http://lorempixel.com/100/120/food/10" alt=""/></a>

        </figure>
        <figure><a title="Caption 11" href="#"><img src="http://lorempixel.com/100/120/food/1" alt=""/></a>

        </figure>
        <figure><a title="Caption 12" href="#"><img src="http://lorempixel.com/100/120/food/2" alt=""/></a>

        </figure>
        <figure><a title="Caption 13" href="#"><img src="http://lorempixel.com/100/120/food/3" alt=""/></a>

        </figure>
        <figure><a title="Caption 14" href="#"><img src="http://lorempixel.com/100/120/food/4" alt=""/></a>

        </figure>
        <figure><a title="Caption 15" href="#"><img src="http://lorempixel.com/100/120/food/5" alt=""/></a>

        </figure>
        <figure><a title="Caption 16" href="#"><img...

CSS

body {
    background-color:#0D4883
}
#thumbnail-scroller {
    height:130px;
    background-color:#810A0A;
    border:10px solid #12559D;
    position:relative;
    margin:50px;
    overflow:auto;
}
/* Create shadow effect on the left and right of container */
 #thumbnail-scroller:before, #thumbnail-scroller:after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:-4px;
    width:4px;
    height:100%;
    box-shadow:0 0 4px black;
    z-index:10;
}
#thumbnail-scroller:after {
    left:auto;
    right:-4px;
}
#thumbnail-scroller .container {
    position:absolute;
    top:0;
    left:0;
    margin:5px 0 0 5px;
    width:300%;
    height:120px;
}
#thumbnail-scroller figure {
    display:block;
    background-color:white;
    float:left;
    width:100px;
    height:120px;
    margin:0 5px 0 0;
    position:relative;
    overflow:hidden;
}
#thumbnail-scroller figcaption {
    display:block;
    position:absolute;
    right:0;
    bottom:-50px;
    left:0;
    background-color:black;
    font:italic normal 11px/normal Arial, Sans-Serif;
    color:white;
    padding:4px 10px;
    text-align:left;
    opacity:.8;
}
#thumbnail-scroller figure img {
    display:block;
    border:none;
    margin:0;
}

JavaScript

(function ($) {

    var $thumbnailScroller = $('#thumbnail-scroller'),
        $container = $thumbnailScroller.find('.container'),
        $item = $container.find('figure'),
        item_length = $item.length,
        item_width = $item.outerWidth(true),
        total_width = item_width * item_length,
        $window = $(window);

    $thumbnailScroller.css('overflow', 'hidden');
    $container.css('width', total_width);

    // Auto caption builder & hover effect
    $item.each(function () {
        if ($(this).children().attr('title')) {
            var cap = $(this).children().attr('title');
            $(this).append('<figcaption>' + cap + '</figcaption>').children().removeAttr('title');
        }
    }).on("mouseenter mouseleave", function (e) {
        $('figcaption', this).stop().animate({
            bottom: e.type == "mouseenter" ? 0 : -50
        }, 200);
    });

    $window.on("resize", function () {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.off().on("mousemove", function (e) {
            if ($(this).width() < $container.width()) {
                $container.css('left', -((e.pageX - o_l) * ((c_w - t_w) / t_w)));
            }
        });
    }).trigger("resize");

})(jQuery);