Thumbnail Scroller

HTML

<div id="thumbnail-scroller">
    <div class="container">
        <figure>
            <a href="#" title="Title for Caption 1">
                <img alt="" src="img/thumbnail-1.jpg">
            </a>
        </figure>
        <figure>
            <a href="#" title="Title for Caption 2">
                <img alt="" src="img/thumbnail-2.jpg">
            </a>
        </figure>
        <figure>
            <a href="#" title="Title for Caption 3">
                <img alt="" src="img/thumbnail-3.jpg">
            </a>
        </figure>
    </div>
</div>

CSS

#thumbnail-scroller {
  height:130px;
  background-color:#810A0A;
  border:10px solid #12559D;
  position:relative;
  margin:50px 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 Arial,Sans-Serif;
  color:white;
  padding:4px 10px;
  text-align:left;
  opacity:.8;
}

#thumbnail-scroller figure img {
  display:block;
  border:none;
  margin:0 0;
}

JQuery

(function($) {

    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };

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

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

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

    $window.on("resize", function() {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.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);

Demo

Lihat Demo

---

Template JSON - #c4612763938057608800

<div id="thumbnail-scroller">
    <script type="text/javascript">
    //<![CDATA[
    var thumbnails = 30;   
    function showThumbs(json) {
        var entry = json.feed.entry,
            title, url;
        document.write('<div class="container">');
        for (var i = 0; i < thumbnails; i++) {
            for (var j = 0; j < entry[i].link.length; j++) {
                if (entry[i].link[j].rel == 'alternate') {
                    url = entry[i].link[j].href;
                    break;
                }
            }
            title = entry[i].title.$t;
            if ("media$thumbnail" in entry[i]) {
                img = entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s100-c");
            } else {
                img = "img/fallback.png";
            }
            document.write('<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>');
        }
        document.write('</div>');
    }
    //]]>
    </script>
    <script type="text/javascript" src="http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showThumbs"></script>
</div>

Demo

Lihat Demo

Tip Untuk Thumbnail Scroller Berjamak

Gunakan JQuery .each() untuk menerapkan fungsi kepada setiap target yang diinginkan, sehingga penargetan variabel $thumbnailScroller menjadi seperti ini:

$('.t-s').each(function() {
    var $thumbnailScroller = $(this);
});

Lihat Demo