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
19 Comments:
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 !
Kecepatan gerakan tergantung jumlah thumbnail, berbanding dengan lebar kontainer. Semakin jauh perbandingannya akan semakin cepat.
mungkin ini di terapkan dibawah foot header sangat bagus, jika container di ganti feed blog (postingan blog) bisa kah ?
Sudah ditambahkan ^:D
Sekarang tak kasih tantangan: "Gimana cara masangnya?" Hehe...
keren efeknya mas tofik cocok buat template info, saya mau tnanya ini bisa bikin berat atau tidak :D
bagus mas... hehhe
mantap masuk 2 biji euy experimentnya
www.designyourway.net/blog/inspiration/css3-html5-experiments-that-will-blow-your-mind-47-examples/
:-bd
mampir ke blognya pak guru :) | oh ya kalo bisa mampir balik ya, mohon kasih saran pada blog saya apa saja yang harus dibenahi lagi >.<
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:
http://ximg.us/upload/1350347977.png
Dan Disitu SAya Ingin Menghilangkan BAgian Newsreelny mas,
Seperti yang Ditunjuk Panah Warna Merah
Example:
http://ximg.us/upload/1350348060.png
Yang Intinya Saya ingin Menghilangkan Bagian elemen newsreel itu sampai kebawah mass,
Terima Kasih :)
Mohon Pencerahannya 0:)
Salam Super \o/
Silahkan dicek bagian ini di template Anda kak :
<div id='lsidebar-wrapper'>
<div class='sidebar section' id='sidebarleft'><div class='widget NewsBar' id='NewsBar1'>
Backup template dulu sebelum mengedit template, apabila terjadi kesalahan bisa dikembalikan lagi seperti semula.
Trus , :D
Dgimana kan lagi kak,,.??
ckckc
:)
Maklum Pemula,.!!
Mohon Antisipasinya
:)
Setelah aku cek saat ini sudah tidak tuh widgetnya, sukses ya... ?
how can I change hover effect on title into normal, what i mean is without hover effect
using blogger json.
Remove this line, then save again:
// 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);
});
Demo: http://jsfiddle.net/tovic/asjdC/21/
no, I mean something look like this.
i.imgur.com/aXJ5cr5.png
I will use the code for my next web design project.
sorry
Kak knpa saat aku pasang dibawah menu ...
Pake JSON , script Callback nya bermasalah kak ...
Pliase Tutor nya kak..
bagaimana mahu meletakkan fallback -webkit-touch-scrolling : touch ?
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.
gan cara penerapannya g mna maaf mas aq msh newbie :)
Post a Comment
<< Home