基于Masonry瀑布流的全屏预览图片画廊插件

Chroma Gallery是一款基于Masonry瀑布流的全屏预览图片画廊jQuery插件。该图片画廊使用Masonry瀑布流布局，当鼠标滑过图片时，图片颜色会变为黑白色。点击某张图片缩略图时，该图片会全屏放大，而且全屏时的背景色为该图片的主导颜色。在全屏放大模式下可以前后导航预览每一张图片。

使用方法

该图片画廊插件依赖于jQuery，Masonry，Images Loaded以及一个自定义的Modernizr插件。

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

另外还需要引入chromagallery.min.css文件，CSS文件中使用了字体文件，字体文件夹需要放置在合适的路径下。

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

HTML结构

该图片画廊的HTML结构非常简单：使用一个<div>元素来包裹所有的图片。

<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-largesrc属性用于指定该图片的高清版本图片的URL位置。

包裹div元素上的chroma-gallery class用于防止图片过早的显示。

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片画廊插件。

<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:
        [
            {
                alt:'Pic 1',
                largesrc:'images/1.jpg'    
            },
            {
                alt:'Pic 2',
                largesrc:'images/2.jpg'    
            },
            {
                alt:'Pic 3',
                largesrc:'images/3.jpg'    
            },
            {
                alt:'Pic 4',
                largesrc:'images/4.jpg'    
            }
        ]
    });
</script>                
              

注意：如果你即提供了HTML的图片代码，有提供了一个items参数，那么插件会使用items参数中提供的图片。

配置参数

可用的easing效果有：

• 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>                
              

回调函数

示例代码：

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

浏览器兼容

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