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.