• 依赖库
• 使用教程
• 需求
• 选项
• 方法
• 回调函数
• 预览下载

依赖库

Chroma Gallery依赖两个库:

• Jquery库
• Masonry库

使用教程

下载dist文件夹，解压到你的项目目录里，然后添加jQuery源码库.

<script src="scripts/modernizr-chrg.min.js"></script>
<script src="scripts/masonry.min.js"></script>
<script src="scripts/chromagallery.min.js"></script>

你也可以用源码包里的文件，包含所有依赖库

<script src="scripts/chromagallery.pkgd.min.js"></script>

添加CSS文件到你的HTML代码里.

<link rel="stylesheet" href="stylesheets/chromagallery.min.css">

HTML代码如下

<div class="chroma-gallery mygallery">
    <img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg">
    <img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg">
    <img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg">
    <img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg">
    <img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg">
    <img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg">
    <img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg">
    <img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg">
    <img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg">
    <img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg">
</div>

说明：alt属性是图片的描述，data-lagesrc是预览大图的路径

JS代码如下

<script type="text/javascript">
    $(".mygallery").chromaGallery(};
</script>

你也可以定制页面显示

<script type="text/javascript">
    $(".mygallery").chromaGallery
    ({
        color:'#000',
        gridMargin:15,
        maxColumns:5
        dof:true,
        screenOpacity:0.8
    });
</script>

也可以通过如下方式选择加载图片

<script type="text/javascript">
    $(".mygallery").chromaGallery
    ({
        items:
        [
            {
                src: 'images/thumbs/1.jpg',
                alt:'Pic 1',
                largesrc:'images/1.jpg'    
            },
            {
                src: 'images/thumbs/2.jpg',
                alt:'Pic 2',
                largesrc:'images/2.jpg'    
            },
            {
                src: 'images/thumbs/3.jpg',
                alt:'Pic 3',
                largesrc:'images/3.jpg'    
            },
            {
                src: 'images/thumbs/4.jpg',
                alt:'Pic 4',
                largesrc:'images/4.jpg'    
            }
        ]
    });
</script>

需求

Chroma Gallery对浏览器要求如下:

• Firefox 4+
• IE 9+
• Google Chrome 8+
• Safari 3.1+
• Opera 11.5+
• IOS Safari 3.2+
• Android Browser 2.1+
• Opera Mobile 12+

Chroma Gallery必须满足Jquery 1.4.3+

选项

你可以用如下选项

效果选项:

• linear
• ease
• easeIn
• easeOut
• easeInOut
• easeInQuad
• easeInCubic
• easeInQuart
• easeInQuint
• easeInSine
• easeInExpo
• easeInCirc
• easeInBack
• easeOutQuad
• easeOutCubic
• easeOutQuart
• easeOutQuint
• easeOutSine
• easeOutExpo
• easeOutCirc
• easeOutBack
• easeInOutQuad
• easeInOutCubic
• easeInOutQuart
• easeInOutQuint
• easeInOutSine
• easeInOutExpo
• easeInOutCirc
• easeInOutBack

方法

可以使用如下方法

示例:

<script type="text/javascript">
    var mygallery = $(".mygallery").chromaGallery();

    //will open the third
    mygallery.chromaGallery("openImg",2);
</script>

回调函数

onLoad，onOpen，onClose，onNext，onPrev，onFullscreen
示例:

<script type="text/javascript">
    $(".mygallery").chromaGallery
    ({
        onLoad:function()
        {
            this.chromaGallery("openImg",2);
        }
    });
</script>

预览与下载

在线预览 网盘下载

原创文章，转载请注明来自：http://www.bluestep.cc/?p=3100