SOURCE

// 初始化插件
var options = {
  inline: true,
  button: false,
  navbar: false,
  toolbar: false,
  title: false
}
var $imgmgr = $('.imgmgr')
var $image = $('.imgmgr-viewer img', $imgmgr)
var image = $image[0]
var viewer = new Viewer(image, options)
var index = 0 // 图片列表 index
var $images = $('.imgmgr-list', $imgmgr) // 图片列表
var $toolbar = $('.imgmgr-toolbar li', $toolbar) // 按钮列表
var urls = []

function Imgmgr() {

  $images.on('click', 'img', function(e){
    index = $('img', $images).index(this)
    image.src = this.src
    viewer.update()
  })

  var scaleX = 1
  var scaleY = 1
  $toolbar.click(function (e){
    var action = $(this).data('action')
    switch (action) {
      case 'zoom-in':
        viewer.zoom(0.1)
        break;
      case 'zoom-out':
        viewer.zoom(-0.1)
        break;
      case 'reset':
        viewer.reset()
        break;
      case 'prev':
        index = index > 0 ? index - 1 : 0
        image.src = urls[index]
        viewer.update()
        break;
      case 'next':
        index = index < urls.length - 1 ? index + 1 : index
        image.src = urls[index]
        viewer.update()
        break;
      case 'rotate-left':
        viewer.rotate(-90)
        break;
      case 'rotate-right':
        viewer.rotate(90)
        break;
      case 'flip-horizontal':
        scaleX = scaleX === 1 ? -1 : 1
        viewer.scaleX(scaleX)
        break;
      case 'flip-vertical':
        scaleY = scaleY === 1 ? -1 : 1
        viewer.scaleY(scaleY)
        break;
      case 'delete':
      console.log(index)
        urls.splice(index, 1)
        index = index > urls.length - 1 ? index -1 : index
        image.src = urls[index]
        imgmgr.show(urls)
        viewer.update()
        break;
    }
  })
}

Imgmgr.prototype.show = function(imgs, suffix) {
	urls = imgs
  $images.html('')
  imgs.forEach(function(url){
    var li = $('<li></li>')
    li.append('<img src="'+url+'">')
    /* li.append(' <button data-action="delete">删除</button>') */
    $images.append(li)
    $imgmgr.show()
  })
  image.src = urls[0]
  viewer.update()
}

Imgmgr.prototype.hide = function() {
	$imgmgr.hide()
}

var imgmgr = new Imgmgr()
imgmgr.show([
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-1.jpg',
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-2.jpg',
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-3.jpg',
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-4.jpg',
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-5.jpg',
  'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-6.jpg'
])

<link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>
<div class="imgmgr" style="display: none;">
  <ul class="imgmgr-list">
    <li>
     <img src="http://chuantu.biz/t6/279/1523347989x-1404792849.jpg">
    </li>
  </ul>
  <div class="imgmgr-container">
    <div class="imgmgr-viewer">
      <img src=""/>
    </div>
  </div>
  <ul class="viewer-toolbar imgmgr-toolbar">
    <li role="button" class="viewer-zoom-in" data-action="zoom-in"></li>
    <li role="button" class="viewer-zoom-out" data-action="zoom-out"></li>
    <li role="button" class="viewer-reset" data-action="reset"></li>
    <li role="button" class="viewer-prev" data-action="prev"></li>
    <li role="button" class="viewer-next" data-action="next"></li>
    <li role="button" class="viewer-rotate-left" data-action="rotate-left"></li>
    <li role="button" class="viewer-rotate-right" data-action="rotate-right"></li>
    <li role="button" class="viewer-flip-horizontal" data-action="flip-horizontal"></li>
    <li role="button" class="viewer-close" data-action="delete"></li>
  </ul>
</div>

body {
  padding:0;
  margin:0;
}
.imgmgr {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.imgmgr .imgmgr-list {
  list-style: none;
  padding:0;
  margin:0;
  width: 35px;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, .75);
}
.imgmgr .imgmgr-list li {
  cursor: pointer;
  padding-bottom: 5px;
}
.imgmgr .imgmgr-list li img{
  display: block;
  width: 35px;
  height: 35px;
}
.imgmgr .imgmgr-list li button{
  cursor: pointer;
  display: block;
  border-width: 0px;
  padding: 2px 0;
  width: 100%;
  background-color: transparent;
  color: rgba(255, 87, 34, .75);
}
.imgmgr-container {
  width: 100%;
  padding-bottom: 35px;
}
.imgmgr .imgmgr-viewer {
  position: relative;
  width: 100%;
  height: 100%;
}
.imgmgr img {
  display: none;
}
.imgmgr-toolbar {
  list-style: none;
  padding:0;
  margin:0;
  position: absolute;
  right: 0;
  bottom: 0;
  
}