viewer.js 动态更新图片导致的问题
作者：互联网
查询相关数据的一组图片，然后看到项目内有这样的功能，直接拿来用，结果用起来的时候懵逼了，看了第一组，然后看第二组的时候直接不显示了，而且下方的小图片也没有切换，后来发现是要更新实例
引用的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