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

PetitQ 图片/图形 2018-11-16 1.46K 0 0

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();
```

Github 地址：https://github.com/s-yadav/ImageViewer

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

已有 366 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

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

使用方法

全屏模式

容器模式

初始化方法

图片模式

初始化方法

配置参数

方法

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

相关文章

rellax 纯js轻量级滚动视觉差特效插件

炫酷jQuery鼠标滑过图片3D折叠效果

纯js实用T恤衫花纹图案预览特效

发表回复取消回复

热销模板

图片/图形

使用方法

全屏模式

容器模式

初始化方法

图片模式

初始化方法

配置参数

方法

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复