支持上下翻页的jQuery图片预览插件

本插件是一款基于jQuery的图片预览插件——jquery.gallery.js，点击图片，弹出弹窗，显示大图，按住弹窗顶部，可以拖拽弹窗。弹窗中间是大图，下面是一些操作按钮，左箭头切换上一张，右箭头切换下一张，旋转按钮可以360°旋转图片。放大和缩小按钮可以放大缩小图片。当图片放大到超出显示范围，可以按住图片拖拽以浏览图片超出部分。并且，本插件支持初始化、关闭、切换等事件的回调。 1、引入css：

<link rel="stylesheet" href="./css/jquery.gallery.css">

2、将images里面的b1.jpg放到您的项目中去。

2、将您的小图套一个a链接，加上data-magnify="gallery"属性，否则点击无效。data-src属性定义了小图对应的大图地址，data-caption为图片弹窗上的标题。如果您有多张图片，希望能上下切换，除了给它们都套上a链接外，还需要data-group属性，并且值都相同，有点类似于fancybox的rel属性示例代码如下：

<a href="javascript:void(0)" data-magnify="gallery" data-group="g1" data-src="./images/big1.png" data-caption="jQuery图片预览插件一">
    <img src="./images/a1.png">
</a>
<a href="javascript:void(0)" data-magnify="gallery" data-group="g1" data-src="./images/big2.png" data-caption="jQuery图片预览插件二">
    <img src="./images/a2.png">
</a>
<a href="javascript:void(0)" data-magnify="gallery" data-group="g1" data-src="./images/big3.png" data-caption="jQuery图片预览插件三">
    <img src="./images/a3.png">
</a>

3、引入gallery.js和jquery

<script src="https://5.jimth.com/download/jquery/jQuery-1.10.2.min.js"></script>
<script src="./js/jquery.gallery.js"></script>

4、调用插件

$(function () {
    $('[data-magnify]').Magnify({
        Toolbar: [
            'prev',
            'next',
            'rotateLeft',
            'rotateRight',
            'zoomIn',
            'actualSize',
            'zoomOut'
        ],
        keyboard:true,
        draggable:true,
        movable:true,
        modalSize:[800,600],
        //插件初始化调用
        beforeOpen:function (obj,data) {
            console.log('beforeOpen')
        },
        //插件初始化完成调用
        opened:function (obj,data) {
            console.log('opened')
        },
        //关闭弹窗前调用
        beforeClose:function (obj,data) {
            console.log('beforeClose')
        },
        //关闭弹窗调用
        closed:function (obj,data) {
            console.log('closed')
        },
        //切换前调用
        beforeChange:function (obj,data) {
            console.log('beforeChange')
        },
        //切换后调用
        changed:function (obj,data) {
            console.log('changed')
        }
    });
})

    这里的Toolbar是定义底部的按钮，回调函数都写在上面的注释里面了。