Use viewerJs to replace the table image preview function in fastadmin to achieve functions such as mouse zoom and rotation

reason

The table image format that comes with the fastadmin framework can only be enlarged, and the mouse wheel cannot be zoomed in

Partial replacement solution:

I am using viewerJs: github , instructions for use

1. Download

Download its css and js files,
pure JS version: https://github.com/fengyuanchen/viewerjs
jQuery version: https://github.com/fengyuanchen/viewerjs
put css and js in public/static of the project

2. use

2.1. Introduce @import url(“…/…/static/viewer.css”) in public/assets/css/backend.css;

If there is backend.min.css, copy the content of backend.css to keep it unified

2.2. Introduce 'viewer' in public/assets/js/require-backend.js: '…/…/static/viewer',

If there is require-backend.min.js, copy the content of require-backend.js to keep it unified

2.3. Then introduce the viewer into the js corresponding to the required page

2.4. Redefine image

            Table.api.events.image = {
    
    
                'load .img-center': function (e, value, row, index) {
    
    
                    $('.img-center').viewer({
    
    
                        url: 'data-original'
                    });
                },
            }

then it's ok

global replacement

1. Download

Download its css and js files,
pure JS version: https://github.com/fengyuanchen/viewerjs
jQuery version: https://github.com/fengyuanchen/viewerjs
put css and js in public/static of the project

2. use

2.1. Introduce @import url(“…/…/static/viewer.css”) in public/assets/css/backend.css;

If there is backend.min.css, copy the content of backend.css to keep it unified

2.2. Introduce 'viewer' in public/assets/js/require-backend.js: '…/…/static/viewer',

If there is require-backend.min.js, copy the content of require-backend.js to keep it unified

2.3. Then introduce viewer in public/assets/js/require-table.js

2.4. Redefine Table.api.formatter.image and Table.api.formatter.images

				image: function (value, row, index) {
    
    
                    value = value == null || value.length === 0 ? '' : value.toString();
                    value = value ? value : '/assets/img/blank.gif';
                    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                    var url = Fast.api.cdnurl(value, true);
                    url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
                    return '<ul class="viewer"><li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li></ul>';
                },
                images: function (value, row, index) {
    
    
                    value = value == null || value.length === 0 ? '' : value.toString();
                    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                    var arr = value != '' ? value.split(',') : [];
                    var html = [];
                    var url;
                    $.each(arr, function (i, value) {
    
    
                        value = value ? value : '/assets/img/blank.gif';
                        url = Fast.api.cdnurl(value, true);
                        url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
                        html.push('<li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li>');
                    });
                    return '<ul class="viewer">'+html.join(' ')+'</ul>';
                },

2.5. Redefine Table.api.events.image

                    'load .img-center': function (e, value, row, index) {
    
    
                        $('.viewer').viewer({
    
    
                            url: 'data-original'
                        });
                    },

then it's ok