图片预览的最佳实践

miwei230 1月前 432

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

最后于 1月前 被miwei230编辑
最佳回复
  • miwei230 1月前

    改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

最新回复 (10)
  • 感谢TA
    0 引用 2

    真优秀

  • miwei230 楼主 最佳回复 1月前
    感谢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

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

    优秀的小伙伴clap

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

    优秀

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

    优秀的朋友们,感谢你们

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

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

  • zdlhappy 7天前
    感谢TA
    0 引用 8

    没有效果

  • gitzwt 5天前
    感谢TA
    0 引用 9

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

  • gitzwt 5天前
    感谢TA
    0 引用 10

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

  • miwei230 楼主 13小时前
    感谢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>";
        };
    });
  • 未登录
    12
返回