VN-Lives: Trình bày hình đại diện bài viết dạng trượt. | Example JQuery Thumbnail Scroller with Blogger JSON.

Bài viết này sẽ cung cấp một ví dụ mẫu để load hình ảnh kèm theo liên kết bài viết trong blogger theo dạng thanh trượt ngang(Thumbnail Scroller with Blogger JSON), nó sẽ tự đông khi con chuột(mouse) di chuyển về phí trên trái hoặc bên phải vùng hiển thị.

Demo:

Download:

http://vnlives.net/VN-Lives/Blog/Demo/Example%20JQuery%20Thumbnail%20Scroller%20with%20Blogger%20JSON.htm

Image:

Source:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VN-Lives | JQuery Thumbnail Scroller with Blogger JSON Demo</title>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">

<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>

    #thumbnail-scroller {
    height:110px;
    position:relative;
    overflow:auto; width:90%; margin:0 auto;
    }

    #thumbnail-scroller:before,
    #thumbnail-scroller:after {
    content:"";
    display:block;
    position:absolute;
    left:-4px;
    width:4px;
    height:100%;
    box-shadow:0 0 4px #000;
    z-index:10;
    }

    #thumbnail-scroller:after {
    left:auto;
    right:-4px;
    }

    #thumbnail-scroller .container {
    width:300%;
    height:100px;
    position:absolute;
    }

    #thumbnail-scroller figure {
    display:block;
    float:left;
    width:100px;
    height:100px;
    position:relative;
    overflow:hidden;margin:0 5px 0 0;
    }

    #thumbnail-scroller figure img {
    display:block;
    border:none;
    width:100px;
    height:100px;
    }
</style>

</head>
<body>
<div id="thumbnail-scroller">
    <script type="text/javascript">
    //<![CDATA[
    var thumbnails = 30;
    function showThumbs(json) {
        var entry = json.feed.entry,
            title, url;
        document.write('<div class="container">');
        for (var i = 0; i < thumbnails; 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;
            if ("media$thumbnail" in entry[i]) {
                img = entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s100-c");
            } else {
                img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxILG_zMRo7tQ6XxrlQjWGRkcsL2HiR4TIljUflGGCaYTSS9sjBiQ8bXjnO27AJ_QUuH9su2_w6dOH5N6ZCgjsLpfhEbmxvJ83fogkJa1s5M614BcAmEt6wDX2cxoU1GYAYyWlybRyaU/s1600/Phep-nhan---Multiplication-Logo-001.jpg";
            }
            document.write('<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>');
        }
        document.write('</div>');
    }
    //]]>
    </script>
    <script type="text/javascript" src="http://blog.vnlives.net/feeds/posts/summary?alt=json-in-script&callback=showThumbs"></script>
</div>

<script type='text/javascript'>//<![CDATA[

(function($) {

    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };

    var $thumbnailScroller = $('#thumbnail-scroller'),
        $container = $thumbnailScroller.find('.container'),
        $item = $container.find('figure'),
        item_length = $item.length,
        item_width = $item.outerWidth(),
        item_margin = config.itemMargins,
        total_width = (item_width + item_margin) * item_length,
        $window = $(window);

    $thumbnailScroller.css('overflow', 'hidden');
    $container.css('width', total_width);

    $window.on("resize", function() {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.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);
//]]>

</script>

</body>

</html>

VN-Lives

Trình bày hình đại diện bài viết dạng trượt. | Example JQuery Thumbnail Scroller with Blogger JSON.

No comments:

Post a Comment