图片预览的最佳实践

miwei230 3月前 855

你是否感觉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

最后于 3月前 被miwei230编辑
最佳回复
  • miwei230 2月前
    gitzwt 怎么把功能封装到formatter.api里?

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

      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)
  • 感谢TA
    0 引用 2

    真优秀

  • miwei230 楼主 3月前
    感谢TA
    0 引用 3

    改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

    最后于 3月前 被miwei230编辑
  • allen 3月前
    感谢TA
    0 引用 4

    优秀的小伙伴clap

  • 千鸟 3月前
    感谢TA
    0 引用 5

    优秀

  • likeni 3月前
    感谢TA
    0 引用 6

    优秀的朋友们,感谢你们

  • jackwu 3月前
    感谢TA
    0 引用 7

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

  • zdlhappy 2月前
    感谢TA
    0 引用 8

    没有效果

  • gitzwt 2月前
    感谢TA
    0 引用 9

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

  • gitzwt 2月前
    感谢TA
    0 引用 10

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

  • miwei230 楼主 最佳回复 2月前
    感谢TA
    0 引用 11
    gitzwt 怎么把功能封装到formatter.api里?

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

      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>";
        };
    });
  • gitzwt 2月前
    感谢TA
    0 引用 12

    谢谢

  • 感谢TA
    0 引用 13

    图片组代码:

        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(' ');
        };
  • sonic 1月前
    感谢TA
    0 引用 14

    mark一下,很优秀

  • ngu98 1月前
    感谢TA
    0 引用 15
  • aldy7913 1月前
    感谢TA
    0 引用 16

    将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都有预览功能了。

    最后于 1月前 被aldy7913编辑
  • 未登录
    17
返回