1

我正在使用 Seadragon Viewer 作为图片库。我想在页面准备好时打开第一张图片。编码：

  <div class="all-facs">
    <a onclick="switchTo(event, '55/dzc_output_images/55_A_1.xml');"
  href="#">
  <img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
    <a onclick="switchTo(event, '55/dzc_output_images/55_A_2.xml');"
  href="#">
  <img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
  </a>
  <div id="containerSeadragon">
  <script type="text/javascript">
                var viewer = null;
                function init() {
                viewer = new Seadragon.Viewer("containerSeadragon");
                viewer.openDzi(dzi);
                }
                function switchTo(event, dzi) {
                if (dzi) {
                viewer.openDzi(dzi);
                } else {
                viewer.close();
                }
                // don't let the browser handle the link
                Seadragon.Utils.cancelEvent(event);   
                }
                Seadragon.Utils.addEvent(window, "load", init);
            </script>
  </div>

现在我只是传递dzi给viewer.openDzi(dzi)，我需要首先单击图像以显示它。我怎样才能通过第dzi一个a？感谢帮助！

更新：我正在使用 jquery-1.7.1。

4

1 回答 1

0

我相信使用 jQuery，您可以在启动时触发对第一个链接的点击，如下所示：

$('.all-facs a').eq(0).trigger('click');

也许更强大的解决方案是将 DZI 信息作为数据属性附加到a标签，如下所示：

<div class="all-facs">
<a data-dzi="55/dzc_output_images/55_A_1.xml" href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a data-dzi="55/dzc_output_images/55_A_2.xml" href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
  var viewer = null;
  function init() {
    viewer = new Seadragon.Viewer("containerSeadragon");
    switchTo($('.all-facs a').eq(0).data('dzi'));
    $('.all-facs a').click(function(event) {
      switchTo($(event.target).data('dzi'));
    });
  }
  function switchTo(dzi) {
  if (dzi) {
    viewer.openDzi(dzi);
  } else {
    viewer.close();
  }
  // don't let the browser handle the link
  Seadragon.Utils.cancelEvent(event);   
  }
  Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>

顺便说一句，与上述无关，您可能想知道 Seadragon 有一个新版本：

http://openseadragon.github.io/

于 2014-03-31T16:24:13.597 回答