nanogallery2,图片展示javascript库


化石原创文章,转载请注明来源并保留原文链接


今日看到一个非常方便的图片展示库(javascript)。支持马赛克方式、网格方式、格式化方式、瀑布方式。

一个例子:

<html>

<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- jQuery -->
    <script src="dist/jquery.min.js" type="text/javascript"></script>

    <!-- nanogallery2 -->
    <link href="dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="dist/jquery.nanogallery2.min.js"></script>
</head>

<body>

    <h1>gallery made with nanogallery2</h1>

    <!-- ### position of the gallery ### -->
    <div id="nanogallery2" style="width: 600px;">gallery_made_with_nanogallery2</div>

    <script>
        jQuery(document).ready(function () {

            jQuery("#nanogallery2").nanogallery2({
                // ### gallery settings ### 
                thumbnailHeight: 200,
                thumbnailWidth: "auto",
                itemsBaseURL: 'image/',

                // ### gallery content ### 
                items: [
                    { src: 'alpha.jpg', srct: 'alpha.jpg', title: 'alpha' },
                    { src: 'BMW.png', srct: 'BMW.png', title: 'BMW' },
                    { src: 'baojun.jpg', srct: 'baojun.jpg', title: 'baojun' },
                    { src: 'Buick.png', srct: 'Buick.png', title: 'Buick' },
                    { src: 'Cadillac.png', srct: 'Cadillac.png', title: 'Cadillac' },
                    { src: 'Chevrolet.png', srct: 'Chevrolet.png', title: 'Chevrolet' },
                    { src: 'Ford.png', srct: 'Ford.png', title: 'Ford' },
                    { src: 'geruisi.jpg', srct: 'geruisi.jpg', title: 'Ford' },
                ]
            });
        });
    </script>

</body>

</html>

可以运行的demo工程:

https://github.com/jycgame/nanogallery2_demo


化石原创文章,转载请注明来源并保留原文链接


发表评论

电子邮件地址不会被公开。 必填项已用*标注