基于Masonry瀑布流全屏画廊弹窗预览

PetitQ 瀑布流 2019-11-18 2.25K 2 1

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参数中提供的图片。

配置参数：

名称	默认值	描述
color	chroma	设置图片画廊的背景色。默认值为“chroma”，它使用图片的主导颜色作为背景色
maxColumns	4	网格布局的最大列数
items	null	要加载的图片数组
dof	false	深度背景效果，对性能有影响
screenOpacity	0.98	屏幕的透明度，值在 0-1 之间
lazyLoad	true	是否启用图片懒加载
gridMargin	7	网格图片之间的间隔
fullscreen	false	是否添加全屏模式
easing	easeInOutQuart	设置打开和关闭图片画廊时的 easing 动画效果，可用值如下：

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

使用方法：

方法名称	参数	描述
openImg	图片的 index	从网格中打开一张图片
closeImg	none	关闭任何打开的图片
goTo	图片的 index	当有图片已经打开时跳转到指定的图片上
next	none	跳转到下一张图片上
prev	none	跳转到前一张图片上

示例代码：

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

基于 Masonry 瀑布流全屏画廊弹窗预览

已有 561 人购买

永久更新：
演示数据：
提取码：xo37

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

瀑布流

基于Masonry瀑布流全屏画廊弹窗预览

使用方法：

HTML 结构：

初始化插件：

配置参数：

easing 效果：

使用方法：

示例代码：

回调函数：

示例代码：

基于 Masonry 瀑布流全屏画廊弹窗预览

相关文章

带排序功能瀑布流 masonry 特效代码

Blueprint 画廊网格瀑布流布局

超酷堆叠相片转瀑布流网格布局动画效果

评论：

发表回复取消回复

热销模板

瀑布流

使用方法：

HTML 结构：

初始化插件：

配置参数：

easing 效果：

使用方法：

示例代码：

回调函数：

示例代码：

基于 Masonry 瀑布流全屏画廊弹窗预览

相关文章

评论：

发表回复 取消回复

热销模板

发表回复取消回复