浙江 杭州

jQuery仿Medium网站响应式lightbox特效

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2017-03-23

人气1544

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


Simplezoom是一款轻量级响应式的仿Medium网站lightbox特效jQuery插件。该lightbox特效会在当前屏幕中居中放大用户点击的图片,并在用户向下滚动或再次点击图片时将图片缩放回原来的大小和位置。

另外一款Medium网站样式的图片放大插件也有类似的效果:jQuery超实用图片放大预览特效插件

使用方法

使用该lightbox插件需要引入jQuery和simplezoom.js以及simplezoom.css文件。

<link href="path/to/simplezoom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="path/to/simplezoom.min.js"></script>                
              
HTML结构

将你的缩略图使用一个<a>元素来包裹,<a>元素的href属性指向大图。

<a href="large.jpg" rel="simplezoom"><img src="small.jpg"></a>
              

该lightbox特效遮罩层默认的HTML结构如下:

<div class="modal-simplezoom modal">
  <div class="modal-bg"></div>
  <div class="modal-content">
    <div class="simplezoom-item"> <img src="{{img}}" alt="simplezoom-img" /> </div>
  </div>
</div>                
              

默认图片加载时的loader的HTML结构如下:

<div class="simplezoom-loader loader"><i></i></div>                
              
初始化插件

在页面加载完毕之后,可以使用下面的方法来加载该Lightbox插件。

$('a[rel=simplezoom]').simplezoom();       
              

配置参数

参数 默认值 描述
classie '' 被创建元素的额外css类名称
offset 40 用户屏幕和lightbox之间的最小间距
scrollclose true 在用户滚动鼠标时自动关闭打开的lightbox
imgclass 'img' 告诉插件到哪里去找原始图片。默认是img元素
duration 图片放大动画的速度,单位毫秒。默认使用CSS属性,不建议使用这个参数,除非你不懂如何在CSS中设置
modalTmpl 覆盖默认的lightbox的HTML代码。可以参考插件的TEMPLATE变量
loaderTmpl 覆盖默认的lightbox loader的HTML代码。可以参考插件的LOADER变量
onModalInit 当用户点击图片元素时触发
onModalClosed 当用户关闭lightbox时触发
onImageLoaded 当大图成功被调用时触发
onImageError 当大图调用失败时触发

应用举例

在lightbox初始化时传入参数:

$('.lightbox').simplezoom({
    offset      : 25,
    scrollclose : true
});                
              

在触发onImageError事件时调用自己的函数:

$('.lightbox').simplezoom({
    /**
     * @image       : 默认的图片链接元素
     * @lightbox    : lightbox元素
     */
    onImageError: function(image, lightbox) {
        console.error( '糟糕! 没有找到图片。' );
    }
});                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:489.91KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1863.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery仿Medium网站响应式lightbox特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)