官方的参考js,是每次预览图片只能显示一张 , 所以如果有多张图片就会多出来许多图片小按钮
修改之后的效果
修改的js文件 /public/static/js/admin.js
修改位置
function imagePreviewDialog(img) {
Wind.css('layer');
var data = [];
img = img.split(',');
img.forEach(function(item,index){
data.push({
"alt": "",
"pid": index, //图片id
"src": item, //原图地址
"thumb": item //缩略图地址
})
});
Wind.use("layer", function () {
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号,默认0
"data": data
} //格式见API文档手册页
, anim: 5, //0-6的选择,指定弹出图片动画类型,默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
})
});
}
调用
//调用 这里的images是,号分割的字符串
<a href="javascript:parent.imagePreviewDialog('{$vo.images}');">
<i class="fa fa-photo fa-fw"></i>
</a>