特效介绍
本插件是一款基于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="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
是定义底部的按钮,回调函数都写在上面的注释里面了。