如何在Media Viewer中设置垂直的样本图像缩略图栏？

<div id="thumbnail-bar"></div>

$(document).ready(function() {
  // 初始化媒体查看器
  $('.media').viewer();

  // 获取媒体查看器实例
  var viewer = $('.media').data('viewer');

  // 设置垂直的样本图像缩略图栏
  viewer.setOptions({
    thumbnail: true,
    thumbnailUrl: 'path/to/thumbnails.jpg',
    thumbnailSize: '100x100',
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: true,
      reset: true,
      prev: true,
      play: true,
      next: true,
      rotateLeft: true,
      rotateRight: true,
      flipHorizontal: true,
      flipVertical: true,
    },
    viewed: function() {
      // 在图像被查看时触发的回调函数
      // 可以在此处更新垂直的样本图像缩略图栏
      updateThumbnailBar();
    }
  });

  // 更新垂直的样本图像缩略图栏
  function updateThumbnailBar() {
    var thumbnails = viewer.getThumbnails();
    var thumbnailBar = $('#thumbnail-bar');

    // 清空缩略图栏
    thumbnailBar.empty();

    // 添加垂直的样本图像缩略图
    thumbnails.forEach(function(thumbnail) {
      thumbnailBar.append('<img src="' + thumbnail + '" alt="Thumbnail">');
    });
  }
});