Mecha versi 2.6.3 sudah dirilis!

Thumbnail Scroller

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  • Template JSON - #c4612763938057608800 
  • Tip untuk Thumbnail Scroller Berjamak 
  • Pembaharuan: 25 September 2013

    jQuery Thumbnail Scroller
    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

    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 :

    <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.

    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:

    // 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/

    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 :)

    Komentar telah ditutup.