布局界面

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

阿里云

Chroma Gallery是一款基于Masonry瀑布流的全屏预览图片画廊jQuery插件。可以把你的图片以网格的形式展示,同时可以优美地全屏预览它们, 除此之外,还有丰富的色彩增加视觉效果,该图片画廊使用Masonry瀑布流布局,当鼠标滑过图片时,图片颜色会变为黑白色。点击某张图片缩略图时,该图片会全屏放大,而且全屏时的背景色为该图片的主导颜色,在全屏放大模式下可以前后导航预览每一张图片。

使用方法:

  1. //该图片画廊插件依赖于jQuery,Masonry,Images Loaded以及一个自定义的Modernizr插件。
  2. <script src="scripts/modernizr-chrg.min.js"></script>
  3. <script src="scripts/imagesloaded.min.js"></script>
  4. <script src="scripts/masonry.min.js"></script>
  5. <script src="scripts/chromagallery.min.js"></script>              
  6. //另外还需要引入chromagallery.min.css文件,CSS文件中使用了字体文件,字体文件夹需要放置在合适的路径下。
  7. <link rel="stylesheet" href="stylesheets/chromagallery.min.css">

HTML结构:

  1. //该图片画廊的HTML结构非常简单:使用一个<div>元素来包裹所有的图片。
  2. <div class="chroma-gallery mygallery">
  3.     <img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg">
  4.     <img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg">
  5.     <img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg">
  6.     <img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg">
  7.     <img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg">
  8.     <img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg">
  9.     <img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg">
  10.     <img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg">
  11.     <img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg">
  12.     <img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg">
  13. </div>
  14. //图片上的alt属性用于指定图片的标题。data-largesrc属性用于指定该图片的高清版本图片的URL位置。包裹div元素上的chroma-gallery class用于防止图片过早的显示。

初始化插件:

  1. //在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片画廊插件。
  2. <script type="text/javascript">
  3.     $(".mygallery").chromaGallery(};
  4. </script>               
  5. //也可以在初始化的时候配置一些参数:
  6. <script type="text/javascript">
  7.     $(".mygallery").chromaGallery
  8.     ({
  9.         color:'#000',
  10.         gridMargin:15,
  11.         maxColumns:5
  12.         dof:true,
  13.         screenOpacity:0.8
  14.     });
  15. </script>                
  16. //你可以像下面的样子在代码中调用图片:
  17. <script type="text/javascript">
  18.     $(".mygallery").chromaGallery
  19.     ({
  20.         items:
  21.         [
  22.             {
  23.                 alt:'Pic 1',
  24.                 largesrc:'images/1.jpg'   
  25.             },
  26.             {
  27.                 alt:'Pic 2',
  28.                 largesrc:'images/2.jpg'   
  29.             },
  30.             {
  31.                 alt:'Pic 3',
  32.                 largesrc:'images/3.jpg'   
  33.             },
  34.             {
  35.                 alt:'Pic 4',
  36.                 largesrc:'images/4.jpg'   
  37.             }
  38.         ]
  39.     });
  40. </script>
  41. //注意:如果你即提供了HTML的图片代码,有提供了一个items参数,那么插件会使用items参数中提供的图片。

配置参数:

名称默认值描述
colorchroma设置图片画廊的背景色。默认值为“chroma”,它使用图片的主导颜色作为背景色
maxColumns4网格布局的最大列数
itemsnull要加载的图片数组
doffalse深度背景效果,对性能有影响
screenOpacity0.98屏幕的透明度,值在0-1之间
lazyLoadtrue是否启用图片懒加载
gridMargin7网格图片之间的间隔
fullscreenfalse是否添加全屏模式
easingeaseInOutQuart设置打开和关闭图片画廊时的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从网格中打开一张图片
closeImgnone关闭任何打开的图片
goTo图片的index当有图片已经打开时跳转到指定的图片上
nextnone跳转到下一张图片上
prevnone跳转到前一张图片上

示例代码:

  1. <script type="text/javascript">
  2.     var mygallery = $(".mygallery").chromaGallery();
  3.  
  4.     //will open the third
  5.     mygallery.chromaGallery("openImg",2);
  6. </script>

回调函数:

名称描述
onLoad图片画廊加载时被调用
onOpen当一张图片被打开时调用
onClose当一张图片被关闭时调用
onNext当跳转到下一张图片时被调用
onPrev当跳转到前一张图片时被调用
onFullscreen当跳转到全屏模式时被调用(如果可用)

示例代码:

  1. <script type="text/javascript">
  2.     $(".mygallery").chromaGallery
  3.     ({
  4.         onLoad:function()
  5.         {
  6.             this.chromaGallery("openImg",2);
  7.         }
  8.     });
  9. </script>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

关键词:
创客主机

热评文章

发表评论

嘿,欢迎咨询!