viewerjs图片查看的使用

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

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

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

 

### ViewerJS 如何查看图片 ViewerJS 是一个功能强大的图像和文档查看器,尤其适合在网页中实现图片预览、缩放、旋转等交互操作。它不仅支持静态页面集成,也可以很好地与 Vue、React 等现代前端框架结合使用。 在 HTML 页面中使用 ViewerJS 查看图片时,需要先引入核心样式文件 `viewer.css` 和脚本文件 `viewer.js`。随后,通过 JavaScript 创建 Viewer 实例,并绑定到目标容器或图片元素上即可实现图片查看功能。例如: ```html <link rel="stylesheet" href="/path/to/viewer.css"> <script src="/path/to/viewer.js"></script> <div id="imageContainer"> <img src="example.jpg" alt="示例图片"> </div> <script> new Viewer(document.getElementById('imageContainer')); </script> ``` 在 Vue 项目中,尤其是 Vue 3 的组合式 API 场景下,可以通过 `ref` 获取 DOM 元素并创建 Viewer 实例。同时,结合 `v-for` 可以实现多张图片预览功能。例如: ```html <template> <div ref="imageContainer"> <img v-for="item in imageList" :key="item" :src="item" :data-original="item" @click="initViewer"> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css'; const imageContainer = ref(null); const imageList = [ 'https://cdn.uviewui.com/uview/swiper/1.jpg', 'https://cdn.uviewui.com/uview/swiper/2.jpg' ]; const initViewer = () => { const viewer = new Viewer(imageContainer.value, { url: 'data-original', show() { viewer.update(); } }); }; </script> ``` 此外,在 Vue 中还可以通过 `setDefaults` 方法全局配置 ViewerJS 的行为,包括是否启用工具栏、缩略图导航、键盘控制等功能。例如: ```javascript import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css'; Viewer.setDefaults({ inline: true, button: true, navbar: true, title: true, toolbar: true, tooltip: true, movable: true, zoomable: true, rotatable: true, scalable: true, transition: true, fullscreen: true, keyboard: true, ready(e) { console.log(e.type, '组件已初始化'); }, shown(e) { console.log(e.type, '图片显示结束'); } }); ``` 对于 jQuery 用户,可以直接通过类选择器调用 `.viewer()` 方法来初始化图片查看器,并传入相关配置项。例如: ```html <script src="jquery.min.js"></script> <script src="viewer.js"></script> <link rel="stylesheet" href="viewer.css"> <div class="image-gallery"> <img src="image1.jpg" alt=""> <img src="image2.jpg" alt=""> </div> <script> $('.image-gallery').viewer({ movable: true, fullscreen: false, minZoomRatio: 0.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 }); </script> ``` 通过上述方式,可以灵活地在不同开发环境下集成 ViewerJS 来实现图片查看功能,满足从基础预览到高级交互的各种需求[^1][^2][^3][^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值