Question

我正在使用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的{{1}}？谢谢你的帮助！

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

Answer 1

我相信使用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/

获取第一个孩子的onclick并传递给该功能

1 个答案: