Viewer.js 图片预览插件参数说明

Viewer.js 图片预览插件参数说明



文章来源地址https://www.toymoban.com/diary/js/57.html

名称类型默认值说明
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
build函数null回调函数,具体查看演示
built函数null回调函数,具体查看演示
show函数null回调函数,具体查看演示
shown函数null回调函数,具体查看演示
hide函数null回调函数,具体查看演示
hidden函数null回调函数,具体查看演示
view函数null回调函数,具体查看演示
viewed函数null回调函数,具体查看演示




到此这篇关于Viewer.js 图片预览插件参数说明的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.toymoban.com/diary/js/57.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
上一篇 2023年08月19日 16:43
下一篇 2023年08月19日 16:43

相关文章

  • 强大的图片预览组件Viewer.js

    ​ Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便。 Viewer.js分为2个版本,js版本和jquery版本,下载地址分别为 纯JS版本:https://github.com/fengyuanchen/viewerjs jQuery 版本:GitHub - fengyuanchen/j

    2024年01月18日
    浏览(40)
  • 用el-image-viewer实现全局预览图片

    背景 在后台管理系统中,一些预览图片的场景,通常都是使用 ` el-image-viewer `   去实现,但是如果多个地方都需要预览图片,又要重复的去写 ` el-image-viewer `    以及一些重复的和预览相关的代码。 可以把预览图片的组件放在根文件,把通用的预览相关的代码放在状态管理

    2024年01月16日
    浏览(36)
  • vue3+elementplus点击按钮使用el-image-viewer图片预览组件

    1.首先确保你是全局引入,不是全局的需要自主引入该组件 2..vue文件中定义组件 3. showsrcListref:[\\\'\\\']格式 4.点击按钮给showsrcListref赋值即可完成,同时将showImagePreview置为true

    2024年01月18日
    浏览(63)
  • 图片预览插件vue-photo-preview的使用

    移动端项目中需要图片预览的功能,但本身使用mintui,vantui中虽然也有,但是为了一个组件安装这个有点儿多余,就选用了vue-photo-preview插件实现(其实偷懒也不想自己写)。 1、安装 或者用淘宝镜像 2、引入 打开项目中main.js,添加如下代码 注:引入可进行配置,部分常用配

    2024年02月13日
    浏览(37)
  • js下载图片、pdf等文件,无预览

    直接使用window.open()或window.locat.href()下载文件遇到图片或pdf文件就会跳转预览页,不能满足我想要的点击直接下载文件到本地的需求,尝试多次,最终通过以下方法实现了我的需求。 鉴于后端返回的是文件路径,首先要将文件url地址转为文件对象,代码如下: npm install saveA

    2024年02月13日
    浏览(44)
  • 类似微信预览缩放保存插件previewImage.js

    很好用的预览缩放保存插件。 插件源码如下:     (function(){         let insideObject = {             // \\\'inputId\\\' : \\\'\\\'    //  用于页面多图片预览时绑定相应预览图片             \\\'inputName\\\':\\\'plantIconPath\\\',  // 用于表单提交             \\\'imageId\\\':\\\'preview_img\\\',    // 用于预览图

    2024年02月11日
    浏览(43)
  • Vue实现图片预览,侧边栏懒加载,不用任何插件,简单好用

    实现样式 需求 实现PDF上传预览,并且不能下载 第一次实现:用vue-pdf,将上传的文件用base64传给前端展示 问题: 水印第一次加载有后面又没有了。 当上传大的pdf文件后,前端获取和渲染又长又慢,甚至不能用 修改实现模式 前端上传PDF,后端将PDF转化成一页一页的图片 前端

    2024年01月24日
    浏览(41)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • 记录-JS简单实现购物车图片局部放大预览效果

    代码不多,先看一下 HTML 里面结构很简单,初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。 再看一下 MagnifyingGlass 上面的就是全部逻辑,实现方法肯定不是最优的,但是其中可以联想到通过像素点的操作实现任意效果。 可以启动一个 node 本地服务,首先见一个

    2023年04月20日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包