图片预览的最佳实践

你是否感觉fastadmin的原生图片预览,重新打开一个窗口让人蛋疼的不行不行。下面将使用layui做一个弹窗式的图片预览。

1、将下面代码放在backend-init.js文件中

$('body').on('click', '[data-tips-image]', function () {
        var img = new Image();
        var imgWidth = this.getAttribute('data-width') || '480px';
        img.onload = function () {
            var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
            Layer.open({
                type: 1, area: imgWidth, title: false, closeBtn: 1,
                skin: 'layui-layer-nobg', shadeClose: true, content: $content,
                end: function () {
                    $(img).remove();
                },
                success: function () {

                }
            });
        };
        img.onerror = function (e) {

        };
        img.src = this.getAttribute('data-tips-image') || this.src;
    });

2、直接在页面的img标签中添加 data-tips-image,点击时自动弹出图片预览

<img src="{$goods.image}" data-tips-image width="50" height="50" alt="">

3、以下是预览效果

image.png

查看更多

关注者
0
被浏览
1.1k
miwei230
miwei230 2018-12-19
codeing老中医

可能你还想偷下懒,不想每次都去写下面的代码

  function(value){
        return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
  }

这里我稍微改进了下代码,在backend-init.js修改如下:
1、在define引用table,进入当前页面;

define(['backend', 'table'], function (Backend, Table) ....

2、在backend-init.js后面去修改fastadmin自带的 Table.api.formatter.image 方法;

  Table.api.formatter.image =  function(value){
        return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
    };

这样,就成功的替换了table中的formatter.image方法,也无需每次都在table里去修改图片预览。下面我粘贴下backend-init.js所有的代码:

define(['backend', 'table'], function (Backend, Table) {

    /*! 注册 data-tips-image 事件行为 */
    $('body').on('click', '[data-tips-image]', function () {
        var img = new Image();
        var imgWidth = this.getAttribute('data-width') || '480px';
        img.onload = function () {
            var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
            Layer.open({
                type: 1, area: imgWidth, title: false, closeBtn: 1,
                skin: 'layui-layer-nobg', shadeClose: true, content: $content,
                end: function () {
                    $(img).remove();
                },
                success: function () {

                }
            });
        };
        img.onerror = function (e) {

        };
        img.src = this.getAttribute('data-tips-image') || this.src;
    });

    Table.api.formatter.image =  function(value){
        return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
    };
});
15 个回答
笑看往事如花
笑看往事如花 2018-11-07
这家伙很懒,什么也没写!

真优秀

有理想的民工
有理想的民工 2018-12-27
这家伙很懒,什么也没写!

图片组代码:

    Table.api.formatter.images =  function(value){
        var arr = value.split(',');
        var html = [];
        $.each(arr, function (i, value) {
            value = value ? value : '/assets/img/blank.gif';
            html.push('<a href="javascript:void(0)" data-tips-image="'+value+'"><img class="img-sm img-center" src="' + value + '" /></a>');
        });
        return html.join(' ');
    };
miwei230
miwei230 2018-11-08
codeing老中医

改js中的table也是一样的,我们只需要更改formatter就可以了,示例如下:

formatter: Table.api.formatter.image

替换成:

formatter: function(value){
                 return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
           }

可以看下我的代码

image.png

allen
allen 2018-11-08
这家伙不懒,就是不知道写啥!

优秀的小伙伴:clap:

千鸟
千鸟 2018-11-16
这家伙很懒,什么也没写!

优秀

likeni
likeni 2018-11-16
软妹子····

优秀的朋友们,感谢你们

jackwu
jackwu 2018-11-16
Code is Poetry

@miwei230 为什么我放到服务器上就弹不出来,在本地可以

zdlhappy
zdlhappy 2018-12-12
这家伙很懒,什么也没写!

没有效果

gitzwt
gitzwt 2018-12-14
这家伙很懒,什么也没写!

没效果的要先加 backend-init.js 里面代码

gitzwt
gitzwt 2018-12-14
这家伙很懒,什么也没写!

怎么把功能封装到formatter.api里?

gitzwt
gitzwt 2018-12-20
这家伙很懒,什么也没写!

谢谢

sonic
sonic 2019-01-04
这家伙很懒,什么也没写!

mark一下,很优秀

ngu98
ngu98 2019-01-07
这家伙很懒,什么也没写!
aldy7913
aldy7913 2019-01-10
爱编程。

将backend-init.js文件中改好后,
由于以前很多页面已经写好了:

{field: 'KP_PicUrl', title: __('Kp_picurl'), formatter: Table.api.formatter.image, operate: false},

又不想每个页面去改,所以直接在 require-table.js 的 table.on('post-body.bs.table')下增加下面这句。

 $.each($('.table img'), function(i,val){val.setAttribute("data-tips-image",val.src);if(val.parentNode.nodeName.toUpperCase()=="A"){val.parentNode.setAttribute("href","javascript:;") };  });

这样所有table下img都有预览功能了。

撰写答案

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

发布
问题

分享
好友

手机
浏览

扫码手机浏览