Pembaharuan: 25 September 2013
HTML
<div id="thumbnail-scroller"> <div class="container"> <figure> <a href="#" title="Thumbnail Scroller"> <img alt=" Create shadow effect on the left and right of container Thumbnail Scroller" src="img/thumbnail-1.jpg"> </a> </figure> <figure> <a href="#" title="Thumbnail Scroller"> <img alt=" Create shadow effect on the left and right of container Thumbnail Scroller" src="img/thumbnail-2.jpg"> </a> </figure> <figure> <a href="#" title="Thumbnail Scroller"> <img alt=" Create shadow effect on the left and right of container Thumbnail Scroller" 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);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="Thumbnail Scroller"><img src="' + img + '" alt=" Create shadow effect on the left and right of container Thumbnail Scroller" /></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&max-results=30&callback=showThumbs'></script>Tip untuk Thumbnail Scroller Berjamak
Gunakan jQuery .each() untuk menerapkan fungsi kepada setiap sasaran yang diinginkan, sehingga penargetan variabel $thumbnailScroller menjadi menyerupai ini:
$('.t-s').each(function() { var $thumbnailScroller = $(this); });