标签:null 演示 函数 viewer js 布尔值 动态 true 图片
查询相关数据的一组图片,然后看到项目内有这样的功能,直接拿来用,结果用起来的时候懵逼了,看了第一组,然后看第二组的时候直接不显示了,而且下方的小图片也没有切换,后来发现是要更新实例
引用的CSS和JS文件
//CSS <link rel="stylesheet" href="~/css/viewer-js.css" /> //JS <script type="text/javascript" src="~/js/viewer-js.js"></script>
HTML的UI组件
<ul id="ImgUi" style="display:none"> </ul>
//初始化图片插件 var viewer = new Viewer(document.getElementById('ImgUi')); //详情查看图片方法 function image_view(id) { var ui = document.getElementById("ImgUi"); ui.innerHTML = ''; //后台查询图片的方法写在中间 //数组结果用循环拼接成li赋值 ui.innerHTML = 拼接完的li; //更新实例(这一句更新实例才能让插件的图片重新加载) viewer.update(); //从第一张开始 $('#ImgUi')[0].children[0].children[0].click(); }
该插件还有很多方法可自定义
配置
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 回调函数,具体查看演示 |
标签:null,演示,函数,viewer,js,布尔值,动态,true,图片 来源: https://www.cnblogs.com/corechen/p/16478757.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。