图片预览

发布于 2018-10-31 16:23:03

有两种预览模式单图和多图(列子用viewerjs)

                       -----------------------------S 单图-----------------------------

我这里打包好了单图多图预览的js和css

[百度云](https://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 单图-----------------------------

                   -----------------------------后面更新多图预览-----------------------------·

查看更多

关注者
0
被浏览
894
2 个回答
xiaobaitu
xiaobaitu 2018-11-04
这家伙很懒,什么也没写!

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

a373429734
a373429734 2019-06-25
这家伙很懒,什么也没写!

楼主,你这个点击空白处 图片弹出框关闭不了。

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览