fastadmin后台详情页面点击放大图片

在数据列表中通过格式化，会自带图片点击放大功能

Table.api.formatter.image
Table.api.formatter.images

例如下图

如何在详情页面也添加此功能呢？

其实可以采用更简单的方法，并且可以全站通用

第一步：

在 /public/assets/js/backend-init.js 中添加如下代码

$('body').on('click', '[data-tips-image]', function () {
        var img = new Image();
        var imgWidth = this.getAttribute('data-width') || '500px';
        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;
    });

第二步：

在需要点击放大的图片中添加属性：data-tips-image 即可，调用十分简单方便，data-width=“300px”
参数可以设置图片适当宽度，后续可以改装JS增加更多属性参数设置。

<img class="selectimg" data-width="300px" data-tips-image src="">

好了，经过测试，在任何模板中都可以轻松调用，可以多个图片，美中不足一点，目前不支持图组方式左右翻页。后续空了更新一下。