viewerjs图片查看的使用

最新推荐文章于 2025-05-06 14:33:58 发布

原创最新推荐文章于 2025-05-06 14:33:58 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#viewer #图片预览 #jQuery

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

ViewerJS是一款高效图片预览插件，支持多种图片操作如缩放、旋转和翻转等。通过简单的配置，即可在网页中实现高质量的图片预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

准备需要的文件：

viewer.min.js
jquery-viewer.min.js
viewer.min.css
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