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( '糟糕! 没有找到图片。' ); } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!