ImageViewer是一款仿谷歌图片的图片缩放和平移特效jQuery插件。ImageViewer有3种图片查看模式:全屏模式、容器模式和图片模式。3种模式下都可以对图片进行缩放和平移来预览图片。它的特点还有:
- 可以平滑的拖动和平移图片。
- 支持移动触摸设备。
- 移动手机中2次触摸图片可以在图片放大和图片缩小之间进行切换。
- 移动手机中可以使用手势来缩放图片。
- 快速加载缩略图,并异步加载高质量大图。
- 允许以API编程的方式控制缩放。
使用方法
使用该图片查看插件需要引入jQuery和imageviewer.min.js以及imageviewer.css文件。
<link rel="stylesheet" href="js/imageviewer.css"> <script src="js/jquery.min.js"></script> <script src="js/imageviewer.min.js"></script>
全屏模式
全屏模式的HTML结构如下:
<div id="image-gallery-1" class="cf"> <img src="assets/images/image_viewer/1.jpg" data-high-res-src="assets/images/image_viewer/1_big.jpg" alt="" class="gallery-items"> <img src="assets/images/image_viewer/2.jpg" data-high-res-src="assets/images/image_viewer/2_big.jpg" alt="" class="gallery-items"> <img src="assets/images/image_viewer/3.jpg" data-high-res-src="assets/images/image_viewer/3_big.jpg" alt="" class="gallery-items"> <img src="assets/images/image_viewer/4.jpg" data-high-res-src="assets/images/image_viewer/4_big.jpg" alt="" class="gallery-items"> </div>
初始化方法:
$(function () { var viewer = ImageViewer(); $('.gallery-items').click(function () { var imgSrc = this.src, highResolutionImage = $(this).data('high-res-img'); viewer.show(imgSrc, highResolutionImage); }); });
容器模式
<div id="image-gallery-2"> <div class="image-container"></div> <img src="assets/images/left.svg" class="prev"/> <img src="assets/images/right.svg" class="next"/> <div class="footer-info"> <span class="current"></span>/<span class="total"></span> </div> </div>
初始化方法:
$(function () { var images = [{ small : 'assets/images/image_viewer/1.jpg', big : 'assets/images/image_viewer/1_big.jpg' },{ small : 'assets/images/image_viewer/2.jpg', big : 'assets/images/image_viewer/2_big.jpg' },{ small : 'assets/images/image_viewer/3.jpg', big : 'assets/images/image_viewer/3_big.jpg' },{ small : 'assets/images/image_viewer/4.jpg', big : 'assets/images/image_viewer/4_big.jpg' }]; var curImageIdx = 1, total = images.length; var wrapper = $('#image-gallery-2'), curSpan = wrapper.find('.current'); var viewer = ImageViewer(wrapper.find('.image-container')); //display total count wrapper.find('.total').html(total); function showImage(){ var imgObj = images[curImageIdx - 1]; viewer.load(imgObj.small, imgObj.big); curSpan.html(curImageIdx); } wrapper.find('.next').click(function(){ curImageIdx++; if(curImageIdx > total) curImageIdx = 1; showImage(); }); wrapper.find('.prev').click(function(){ curImageIdx--; if(curImageIdx < 0) curImageIdx = total; showImage(); }); //initially show image showImage(); });
图片模式
<div id="image-gallery-3" class="cf"> <img src="assets/images/image_viewer/1.jpg" data-high-res-src="assets/images/image_viewer/1_big.jpg" alt="" class="pannable-image"> <img src="assets/images/image_viewer/2.jpg" data-high-res-src="assets/images/image_viewer/2_big.jpg" alt="" class="pannable-image"> </div>
初始化方法:
$(function () { $('.pannable-image').ImageViewer(); });
配置参数
ImageViewer
函数:
// container 和 options都是可选参数 var viewer = ImageViewer(container, options);
container
可以是选择器字符串,jQuery对象或DOM对象。ImageViewer会返回一个viewer实例对象,可以使用它来调用方法。
传入参数的格式为:
var viewer = ImageViewer('#container',{ maxZoom : 400 });
可用的配置参数有:
参数 | 允许值 | 默认值 | 描述 |
zoomValue | 百分比值 | 100 | 定义图片初始化是的百分比值 |
maxZoom | 百分比值 | 500 | 图片最大可以缩放的百分比值 |
snapView | boolean | true | 是否显示snap视图 |
refreshOnResize | boolean | true | 在浏览器窗口大小改变的时候是否刷新viewer |
方法
-
zoom(zoomValue,point)
:通过代码来缩放图片。-
zoomValue
:缩放的百分比值。 -
point
:缩放中心的点坐标{x,y}
。如果没有定义使用容器的中心作为缩放的中心。
viewer.zoom(300, {x:500, y: 500});
-
-
resetZoom()
:根据参数(Options)中给定的值来重置缩放值。viewer.resetZoom();
-
refresh()
:刷新viewer。viewer.refresh();
-
show(imgSrc, highResImg)
:显示全屏模式的图片预览。(只有插件使用全屏模式来初始化时才有效)-
imgSrc
:小图的URL地址。 -
highResImg
:同一张图片的高质量版本。
viewer.show('image1.png','hi-res-image1.png');
-
-
hide()
:隐藏全屏模式viewer。(只有插件使用全屏模式来初始化时才有效)viewer.hide();
-
load(imgSrc, highResImg)
:在viewer中加载一张图片。在全屏模式和容器模式中都有效。-
imgSrc
:小图的URL地址。 -
highResImg
:同一张图片的高质量版本。
viewer.load('image1.png','hi-res-image1.png');
-
-
destroy()
:销毁实例以及绑定的事件。viewer = viewer.destroy();
ImageViewer插件的github地址为:https://github.com/s-yadav/ImageViewer
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!