Edit in JSFiddle

<div id="thumbnail-scroller"></div>
<script>
    var noimg = "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.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://dte-feed.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=30&amp;callback=showThumbs'></script>

body {
    background-color:#0D4883
}
#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:120px;
    height:120px;
    margin:0 5px 0 0;
    position:relative;
    overflow:hidden;
}
#thumbnail-scroller figcaption {
    display:none;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    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;
    width:120px;
    height:120px;
}

(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).children().removeAttr('title').append('<figcaption>' + cap + '</figcaption>');
        }
    }).on("mouseenter mouseleave", function (e) {
        $('figcaption', this).stop(true, true)[e.type == "mouseenter" ? "fadeIn" : "fadeOut"](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);