有两种预览模式单图和多图(列子用viewerjs)
-----------------------------S 单图-----------------------------
我这里打包好了单图多图预览的js和css
[百度云](pan.baidu.com/s/1bdz_Ni7YUPo_Wg_H_XyUaw) 密码:0xqn
1、下载viewerjs
2、 {field:'goods_img', title: __('图片'), formatter: Controller.api.formatter.image}
3、在本js的api.formatter加一个image
image: function (value, row, index) {
value = value ? value : '/assets/img/blank.gif';
var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
return '<img class="' + classname + '" data-original="' + value + '" src="' + value + '" onmouseover="'+ Controller.api.changeImg() +'"/>';
},
4、在对应jsController.app
下面加上
changeImg:function(){
require.config({
paths : {
'别名' : ["viewer-jquery.min,js的路径(不要后缀)"],
},
shim: {
'别名': ['viewer.min.css的路径(css要后缀)'],
},
});
require(['别名'], function (别名) {
$('img.img-center').viewer({
url: 'data-original',
});
});
},
-----------------------------E 单图-----------------------------
-----------------------------后面更新多图预览-----------------------------·
最后于 3月前
被C̶r̶a̶y̶o̶-杭州编辑
(解决点击两下,优化代码)