javascript - 如何使用 openseadragon 为数组中的单个图块源添加标题？

Question

我的 openseadragon 可以很好地从数组中加载 tilesources。瓦片源是从 mysql 表中提取的，如下所示：

$tilesources = "/images/20190726075000_100/a20190726075000_100.dzi","/images/20190726075000_100/a20190726075000_100.dzi"

的JavaScript：

(function() {
    const viewer = new OpenSeadragon.Viewer({
        id: "openseadragon-<?php echo $imgid; ?>",
        prefixUrl: '/assets/openseadragon/images/', // prefix for image control buttons folder
        tileSources: [ <?php echo "$tilesources"; ?> ],
        controlsFadeDelay: 60000,
        navigationControlAnchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT, // controls position 
        navigationControlAnchor: OpenSeadragon.ControlAnchor.TOP_RIGHT, // controls position 
        homeFillsViewer: true,
        defaultZoomLevel: 1.2,
        zoomPerClick: 1.5,          
        sequenceMode: true,
        showFullPageControl: true, // works
      });
    })();

我把它包起来，让它显示在fancybox中。通过 fancybox，我使用 data-caption='' 添加了一个基本的标题。这为查看器/视口提供了一个通用的公共标题。

问题是每个单独的图块源都有自己的标题。我没有在 openseadragon 中看到为每个图块添加标题的选项。

我想知道是否有一种方法可以添加回调（无论您如何称呼它）以在您浏览图块时动态更新fancybox标题？

标签： javascriptopenseadragon

Answer 1

当用户以序列模式导航到新图像时，会有一个事件。你可以这样做：

var captions = [ <?php echo "$captions"; ?> ];

viewer.addHandler('page', function(event) {
  var caption = captions[event.page];
  // Update the caption element with the caption
});