图片预览


有两种预览模式单图和多图(列子用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 单图-----------------------------

                   -----------------------------后面更新多图预览-----------------------------·
最后于 1月前 被C̶r̶a̶y̶o̶-杭州编辑 (解决点击两下,优化代码)
最新回复 (1)
  • xiaobaitu 1月前
    感谢TA
    0 引用 2

    不错。正需要。楼主赶紧更新吧

  • 未登录
    3
返回