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);
});
19 Komentar
IRIL SAGITA
Gerakan ke kanan dan ke kirinya terlalu cepat kak, kalau ingin memperlambatnya gimana ?
maaf jika setiap ada posting baru aku selalu tanya, coz aku penasaran dengan hasil karya anda, n selalu ingin belajar dan mencoba ilmu dari sini !
Taufik Nurrohman
Kecepatan gerakan tergantung jumlah thumbnail, berbanding dengan lebar kontainer. Semakin jauh perbandingannya akan semakin cepat.
Unknown
mungkin ini di terapkan dibawah foot header sangat bagus, jika container di ganti feed blog (postingan blog) bisa kah ?
Taufik Nurrohman
Sudah ditambahkan ^:D
Sekarang tak kasih tantangan: "Gimana cara masangnya?" Hehe...
Unknown
keren efeknya mas tofik cocok buat template info, saya mau tnanya ini bisa bikin berat atau tidak :D
Unknown
bagus mas... hehhe
Beben Koben
mantap masuk 2 biji euy experimentnya
www.designyourway.net/blog/inspiration/css3-html5-experiments-that-will-blow-your-mind-47-examples/
:-bd
Unknown
mampir ke blognya pak guru :) | oh ya kalo bisa mampir balik ya, mohon kasih saran pada blog saya apa saja yang harus dibenahi lagi >.<
Anonim
Maaf mas, :(
Saya Ingin Bekomentar ^_^ ,
Tapi Berbeda DAri Topik PErmasalahan,..!! :D
Begini mas,
KEtika Blog Saya MEmasukki bagian posting ada 3 collum disitu mass
Example:
Dan Disitu SAya Ingin Menghilangkan BAgian Newsreelny mas,
Seperti yang Ditunjuk Panah Warna Merah
Example:
Yang Intinya Saya ingin Menghilangkan Bagian elemen newsreel itu sampai kebawah mass,
Terima Kasih :)
Mohon Pencerahannya 0:)
Salam Super \o/
IRIL SAGITA
Silahkan dicek bagian ini di template Anda kak :
Anonim
Trus , :D
Dgimana kan lagi kak,,.??
ckckc
:)
Maklum Pemula,.!!
Mohon Antisipasinya
:)
IRIL SAGITA
Setelah aku cek saat ini sudah tidak tuh widgetnya, sukses ya... ?
bond
how can I change hover effect on title into normal, what i mean is without hover effect
using blogger json.
Taufik Nurrohman
Remove this line, then save again:
Demo: http://jsfiddle.net/tovic/asjdC/21/
bond
no, I mean something look like this.
i.imgur.com/aXJ5cr5.png
I will use the code for my next web design project.
sorry
S.M.R
Kak knpa saat aku pasang dibawah menu ...
Pake JSON , script Callback nya bermasalah kak ...
Pliase Tutor nya kak..
Anonim
bagaimana mahu meletakkan fallback -webkit-touch-scrolling : touch ?
Taufik Nurrohman
Sorry, I didn't know about that. Maybe this article can help » http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
By the way, there are some updates on the code above.
Unknown
gan cara penerapannya g mna maaf mas aq msh newbie :)