图片浏览插件(支持图片轮播、上下张查看、放大缩小、旋转)

应用场景：

在页面上显示图片，但图片太小，不方便观看。

在页面展示的原图：

使用插件查看的效果图： 

 

主要功能：

• 支持选项
• 支持方法
• 支持事件
• 支持触摸
• 支持移动
• 支持缩放
• 支持旋转
• 支持键盘
• 跨浏览器支持

 

 

使用该插件必须引入相对应的js和css，我在百度网盘下已经为大家准备好了：

链接: https://pan.baidu.com/s/1LAMv-chHXMp1dzPsvc8-2Q

提取码：6wxp

使用方法：

1.引入css和js

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

HTML:

<ul id="viewer">
    <li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图片6"></li>
</ul>

 

插件默认会取图片的src地址。如果想要放大之后换一张大图的话，可以把大图的路径写在data-original属性中，然后设置url : "data-original" 。alt用来存放图片的标题。

 

Js:

$('#viewer').viewer();

配置： 

名称	类型	默认值	说明
inline	布尔值	false	启用 inline 模式
button	布尔值	true	显示右上角关闭按钮（jQuery 版本无效）
navbar	布尔值/整型	true	显示缩略图导航
title	布尔值/整型	true	显示当前图片的标题（现实 alt 属性及图片尺寸）
toolbar	布尔值/整型	true	显示工具栏
tooltip	布尔值	true	显示缩放百分比
movable	布尔值	true	图片是否可移动
zoomable	布尔值	true	图片是否可缩放
rotatable	布尔值	true	图片是否可旋转
scalable	布尔值	true	图片是否可翻转
transition	布尔值	true	使用 CSS3 过度
fullscreen	布尔值	true	播放时是否全屏
keyboard	布尔值	true	是否支持键盘
interval	整型	5000	播放间隔，单位为毫秒
zoomRatio	浮点型	0.1	鼠标滚动时的缩放比例
minZoomRatio	浮点型	0.01	最小缩放比例
maxZoomRatio	数字	100	最大缩放比例
zIndex	数字	2015	设置图片查看器 modal 模式时的 z-index
zIndexInline	数字	0	设置图片查看器 inline 模式时的 z-index
url	字符串/函数	src	设置大图片的 url
build	函数	null	回调函数，具体查看演示
built	函数	null	回调函数，具体查看演示
show	函数	null	回调函数，具体查看演示
shown	函数	null	回调函数，具体查看演示
hide	函数	null	回调函数，具体查看演示
hidden	函数	null	回调函数，具体查看演示
view	函数	null	回调函数，具体查看演示
viewed	函数	null	回调函数，具体查看演示

 

参数的用法：

$('#viewer').viewer({url:"data-original"});

 

 

 

个人使用实例：

1、引入上面的css、js

2、用的是vue框架、有兴趣可以了解

3、HTML：

 <div class="form-group" id="anappealName">
          <div class="col-sm-2 control-label">故障图片</div>
                    <div class="col-sm-10" id="imgresult">
          </div>
 </div>

4、Js

methods: {
        getInfo: function(id){
            $.get(baseURL + "/deviceUserApplication/info/"+id, function(r){
                if(r.deviceUserApplication.attachment!="" && r.deviceUserApplication.attachment!= null ){
                    var arr = r.deviceUserApplication.attachment.split(",");
                    for(var i=0;i<arr.length;i++){
                        $("#imgresult").append("      <img height='100' width='100' data-original='/fileUpload/displayImg/"+arr[i]+"'  id="+i+" src='/fileUpload/displayImg/"+arr[i]+"'>");
                    }
                    $('#imgresult').viewer({
                        url: 'data-original',
                        fullscreen:'false'
                    });

                }
                vm.deviceUserApplication = r.deviceUserApplication;
            });
        },

    }

JS逻辑：根据id查询出一个对象，获取这个对象中存放图片id的集合列，集合列中的id使用逗号隔开存放的，所以我们js拿到后还需要将其按逗号分割，再去请求后台接口。

 

Java后台接口：

@RequestMapping(value = "/displayImg/{id}", method = { RequestMethod.POST, RequestMethod.GET })
    public String displayImg(@PathVariable Long id, HttpServletRequest request, HttpServletResponse response) throws IOException
    {
        SysAttachmentEntity sysAttachmentEntity = this.sysAttachmentService.selectByPrimaryKey(id);
        if (sysAttachmentEntity == null)
        {
            return null;
        }
        File f = new File(sysAttachmentEntity.getFilePath());
        //判断该文件是否存在
        if (!f.exists())
        {

            return null;
        }
        String filepath = sysAttachmentEntity.getFilePath();

        //截取时间戳
        String fileName = filepath.substring(filepath.lastIndexOf("/")+1);

        //获取图片存放路径
        File file = new File(filepath);
        if (file.exists())
        {

            // 设置强制下载不打开
            response.setContentType("application/force-download");
            // 设置文件名  与显示的文件名相匹配  成功就显示
            response.addHeader("Content-Disposition", "attachment;fileName=" + fileName);
            byte[] buffer = new byte[1024];
            FileInputStream fis = null;
            BufferedInputStream bis = null;
            try
            {
                fis = new FileInputStream(file);
                bis = new BufferedInputStream(fis);
                OutputStream os = response.getOutputStream();
                int i = bis.read(buffer);
                while (i != -1)
                {
                    os.write(buffer, 0, i);
                    i = bis.read(buffer);
                }
                os.close();
            }
            catch (Exception e)
            {
                e.printStackTrace();
            }
            finally
            {
                if (bis != null)
                {
                    try
                    {
                        bis.close();
                    }
                    catch (IOException e)
                    {
                        e.printStackTrace();
                    }
                }
                if (fis != null)
                {
                    try
                    {
                        fis.close();
                    }
                    catch (IOException e)
                    {
                        e.printStackTrace();
                    }
                }
            }
        }
        return null;
    }

 

这篇文章是优化之前自己写的那篇《文件上传(图片)与页面展示》，中的页面图片展示。展示的接口用的是同一个。

 

 

该功能的插件转自：http://www.jq22.com/jquery-info6536