Thumbnail Scroller

Pembaharuan: 25 September 2013

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;
  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;
}

jQuery

(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);

Lihat Demo

---

Template JSON - #c4612763938057608800

<div id="thumbnail-scroller"></div>
<script>
//<![CDATA[
var noimg = "img/no-image.png";
function showThumbs(json) {
    var entry = json.feed.entry,
        title, url, skeleton = '<div class="container">';
    for (var i = 0; i < entry.length; 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;
        img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s120-c") : noimg;
        skeleton += '<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>';
    }
    skeleton += '</div>';
    document.getElementById('thumbnail-scroller').innerHTML = skeleton;
}
//]]>
</script>
<script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=30&amp;callback=showThumbs'></script>

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