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