viewerjs图片查看的使用

viewerjs是一个可以快速实现图片预览的插件。

官网demo地址：https://fengyuanchen.github.io/viewerjs/

• 准备需要的文件：

1. viewer.min.js

2. jquery-viewer.min.js

3. viewer.min.css

4. jquery.min.js

• 引入文件
• 使用方法：

$(document).ready(function () {
                $('.territory_slide_items').viewer({
                    // url: 'data-original',大图预览的图片
                    movable: true,
                    fullscreen:false,//是否全屏
                    minZoomRatio:.4,
                    maxZoomRatio:20,
                    scalable:false,
                    keyboard:false,
                    navbar: false,//底部图片导航
                    button: true,
                    toolbar: {
                        zoomIn: 1,
                        zoomOut: 1,
                        oneToOne: 1,
                        reset: 1,
                        prev: 1,
                        play: 0,
                        next: 1,
                        rotateLeft: 1,
                        rotateRight: 1,
                        flipHorizontal: 1,
                        flipVertical: 1, 
                    },
                    title: false
                });
            })

.territory_slide_items:需要有图片预览功能的样式名，范围越大，包含的图片越多

配置说明：
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