ImageViewer-仿谷歌图片缩放和平移图片预览jQuery插件

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
});               
              

可用的配置参数有：

方法

• 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