1、Viewer.js点击按钮放大图片用法

<div onclick="getHideBig('hide_img_weight1')" id="btn_img_weight1">查看图片</div>
<img src="tibet-3.jpg" id="hide_img_weight1" style="display: none;"/>

<script type="text/javascript">
    // 隐藏图片放大预览
    function getHideBig(objId) {
        let imgUrl = $('#' + objId).attr('src');

        var image = new Image();
        image.src = imgUrl;
        var btnViewer = new Viewer(image, {
            hidden: function () {
                btnViewer.destroy();
            },
        });
        btnViewer.show();
    }
</script>

在这里插入图片描述

2、viewer 函数参数说明

viewer({ }) 方法除了实例中提到的url 和 title 参数之外，还可以配置其他参数，具体的属性参数如下：

inline 布尔值 false 是否启用inline模式
button 布尔值 true 是否显示右上角关闭按钮
navbar 布尔值 true 是否显示缩略图导航
title 布尔值 true 是否显示当前图片的标题
toolbar 布尔值 true 是否显示工具栏
tooltip 布尔值 true 是否显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 是否使用CSS3过度
fullsreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔，单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚轮滚动时缩放比例
minZoomRatio 浮点型 0.01（1%）最小缩放比例
maxZoomRatio 整型 100（10000%）最大缩放比例
zIndex 整型 2015 图片查看器modal模式时z-index值
zIndexInline 整型 0 图片查看器inline模式时z-index值
url 字符串/函数 src 设置查看图片时的图片地址来源
build 函数 null 回调函数，viewer.js文件加载完成后调用
built 函数 null 回调函数，viewer函数初始化之前调用（只调用一次）
show 函数 null 回调函数，加载展示图层前调用
shown 函数 null 回调函数，加载展示图层完成后调用
hide 函数 null 回调函数，点击关闭展示按钮时调用
hidden 函数 null 回调函数，展示图层关闭前调用
view 函数 null 回调函数，加载展示图片前调用
viewed 函数 null 回调函数，展示图片加载完成时调用