jQuery仿Medium网站响应式lightbox特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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( '糟糕! 没有找到图片。' );
    }
});