bootstrap-table viewer.js 查看图片

插件viewer版本v1.1.0地址：

https://fengyuanchen.github.io/viewer

列表中有一列显示图片的缩略图，点击查看图片的内容，有时候图片需要将图片缩放或旋转

前提：引入viewer.js和viewer.css

1. 在html中加入一个table标签

<table id="bootstrap-table"></table>

2. js处理

bootstrap-table中当所有数据被加载时触发处理函数onLoadSuccess

,columns: [{
    field: 'filePath',
    title: '图片',
    formatter: function (value, row, index) {
           return '<img width="32" height="32" data-original="'+ encodeURI(value) +'" src="'+ encodeURI(value) +'">';
	}
}]
,onLoadSuccess: function(data) {
    console.log(data)
    var $box = $('#bootstrap-table')
    var options = {
        url: 'data-original',
        navbar: false,
        zoomRatio: 0.1,
        button: true,
        title: false,
        keyboard: false,
        toolbar: {
            zoomIn: 1,
            zoomOut: 1,
            oneToOne: 1,
            reset: 1,
            prev: 0,
            play: 0,
            next: 0,
            rotateLeft: 1,
            rotateRight: 1,
            flipHorizontal: 1,
            flipVertical: 1,
        },
        viewed: function () {

        }
    }
    $box.viewer('destroy').viewer(options)
}

viewer会去找容器$box里的img标签，所以需要指定img标签在哪个容器中。