Thumbnail Scroller
Pembaharuan: 25 September 2013
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);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&max-results=30&callback=showThumbs'></script>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);
});Labels: Gambar, JavaScript, jQuery, Potongan
