首页 > 特效插件 > 表格弹出层 >  支持上下翻页的jQuery图片预览插件正文

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

特效介绍
jquery.gallery.js图片预览插件

本插件是一款基于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属性,并且值都相同,有点类似于fancyboxrel属性示例代码如下:
<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="http://www.5imoban.net/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是定义底部的按钮,回调函数都写在上面的注释里面了。
下载 提取码/密码:pkkk(点击复制密码) 预览