记录使用viewer.js 自定义按钮

前言

本文使用的是V1.10.1版本，开源地址如下

GitHub：https://github.com/fengyuanchen/viewerjs

GitCode加速：https://gitcode.net/mirrors/fengyuanchen/viewerjs

Demo：Viewer.js

viewer.js下载：https://download.csdn.net/download/LiuQjie/75392239

Font Awesome图标库：Font Awesome，一套绝佳的图标字体库和CSS框架

backdrop设置false无遮罩层背景颜色

解决办法：$('.viewer-container').addClass('viewer-backdrop');追加背景样式

1、引入文件

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

2、CSS

    /*图片样式*/
    #picView {
        width: 100%;
        margin: 0 auto;
        font-size: 0;
    }

    #picView li {
        display: inline-block;
        width: 200px;
        margin-left: 1%;
        padding-top: 1%;
    }

    #picView li img {
        width: 200px;
    }
    /*按钮主要样式*/
    .viewer-btn {
        bottom: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        text-align: center;
        z-index: 10000;
    }
    
    .viewer-btn a {
        background-color: #1E9FFF;
        border: none;
        color: white;
        padding: 18px 12px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .viewer-btn a i {
        font-size: 20px;
    }

 3、HTML

<div class="viewer-btn" style="display: none">
    <a href="javascript:" id="zoom_in"><i class="fa fa-search-plus">&nbsp;放大</i></a>
    <a href="javascript:" id="zoom_out"><i class="fa fa-search-minus">&nbsp;缩小</i></a>
    <a href="javascript:" id="prev"><i class="fa fa-chevron-left">&nbsp;上一张</i></a>
    <a href="javascript:" id="next"><i class="fa fa-chevron-right">&nbsp;下一张</i></a>
    <a href="javascript:" id="rotate_left"><i class="fa fa-rotate-left">&nbsp;左旋转</i></a>
    <a href="javascript:" id="rotate_right"><i class="fa fa-rotate-right">&nbsp;右旋转</i></a>
    <a href="javascript:" id="close" style="background-color: #FF5722"><i class="fa fa-close">&nbsp;关闭</i></a>
</div>
<ul id="picView">
    <li><img src="img/pic-1.jpg" alt="图片1"></li>
    <li><img src="img/pic-2.jpg" alt="图片2"></li>
    <li><img src="img/pic-3.jpg" alt="图片3"></li>
    <li><img src="img/pic-4.jpg" alt="图片4"></li>
    <li><img src="img/pic-5.jpg" alt="图片5"></li>
</ul>

4、实现代码

    var viewer;
    $(function () {
        viewer = new Viewer(document.getElementById('picView'), {
            toolbar: false,//关闭工具栏
            navbar: false,//关闭视图栏
            title: false,//关闭标题栏
            button: false,//关闭右上角关闭按钮
            backdrop: false,//点击遮罩层不关闭。
            ready: function (e) {
                console.log(e.type);
            },
            show: function (e) {
                console.log(e.type);
                //追加遮罩层样式
                $('.viewer-container').addClass('viewer-backdrop');
            },
            shown: function (e) {
                console.log(e.type);
            },
            hide: function (e) {
                console.log(e.type);
                //隐藏自定义按钮
                $('.viewer-btn').hide();
            },
            hidden: function (e) {
                console.log(e.type);
            },
            view: function (e) {
                console.log(e.type);
            },
            viewed: function (e) {
                console.log(e.type);
                //显示自定义按钮
                $('.viewer-btn').show();
            },
            move: function (e) {
                console.log(e.type);
            },
            moved: function (e) {
                console.log(e.type);
            },
            rotate: function (e) {
                console.log(e.type);
            },
            rotated: function (e) {
                console.log(e.type);
            },
            scale: function (e) {
                console.log(e.type);
            },
            scaled: function (e) {
                console.log(e.type);
            },
            zoom: function (e) {
                console.log(e.type);
            },
            zoomed: function (e) {
                console.log(e.type);
            },
            play: function (e) {
                console.log(e.type);
            },
            stop: function (e) {
                console.log(e.type);
            }
        });
        //初始化完，弹出图片
        viewer.show();
    });
    $('.viewer-btn a').click(function () {
        switch ($(this).attr('id')) {
            case 'zoom_in'://放大
                //以相对比例缩放图像，显示工具提示（默认： false）
                viewer.zoom(0.1, true);
                break;
            case 'zoom_out'://缩小
                //以相对比例缩放图像，显示工具提示（默认： false）
                viewer.zoom(-0.1, true);
                break;
            case 'prev'://上一张
                //表示当前为第一个时是否转至查看最后一个。默认： false
                viewer.prev(true);
                break;
            case 'next'://下一张
                //表示当前为第一个时是否转至查看最后一个。默认： false
                viewer.next(true);
                break;
            case 'rotate_left'://左旋转
                //向左旋转：需要一个负数（度数 < 0）
                viewer.rotate(-90);
                break;
            case 'rotate_right'://右旋转
                //向右旋转：需要一个正数（度数 > 0）
                viewer.rotate(90);
                break;
            case 'close'://关闭
                viewer.hide();
                $('.viewer-btn').hide();
                break;
        }
    });

5、实现效果