当前位置:主页 > 网页特效 > 瀑布流特效 >

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

发布时间:2018/06/03 来源:互联网 浏览: 关键词:瀑布流 masonry 
基于Masonry瀑布流的全屏预览图片画廊插件 基于Masonry瀑布流的全屏预览图片画廊插件
阿里云
简要教程

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

 使用方法

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

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

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

<linkrel="stylesheet"href="stylesheets/chromagallery.min.css">               
 HTML结构

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

<divclass="chroma-gallery mygallery">
    <imgsrc="images/thumbs/1.jpg"alt="Pic 1"data-largesrc="images/1.jpg">
    <imgsrc="images/thumbs/2.jpg"alt="Pic 2"data-largesrc="images/2.jpg">
    <imgsrc="images/thumbs/3.jpg"alt="Pic 3"data-largesrc="images/3.jpg">
    <imgsrc="images/thumbs/4.jpg"alt="Pic 4"data-largesrc="images/4.jpg">
    <imgsrc="images/thumbs/5.jpg"alt="Pic 5"data-largesrc="images/5.jpg">
    <imgsrc="images/thumbs/6.jpg"alt="Pic 6"data-largesrc="images/6.jpg">
    <imgsrc="images/thumbs/7.jpg"alt="Pic 7"data-largesrc="images/7.jpg">
    <imgsrc="images/thumbs/8.jpg"alt="Pic 8"data-largesrc="images/8.jpg">
    <imgsrc="images/thumbs/9.jpg"alt="Pic 9"data-largesrc="images/9.jpg">
    <imgsrc="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">
    varmygallery = $(".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>               

 浏览器兼容

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top