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

2021-07-21 网页素材 0 1,117
郑重承诺丨新科源码提供安全交易、信息保真!
增值服务:
源码教程
安装指导
环境配置
模板安装
网站建设
二次开发
微信 微信

联系电话:13119194708

进入TA的商铺 联系官方客服
详情介绍

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>

浏览器兼容
Firefox 4+
IE 9+
Google Chrome 8+
Safari 3.1+
Opera 11.5+
IOS Safari 3.2+
Android Browser 2.1+
Opera Mobile 12+

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

资源下载此资源仅限注册用户下载,请先
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 网页素材 基于Masonry瀑布流的全屏预览图片画廊插件 https://www.xinke123.net/161.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关资源

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务