1

I'm using a Seadragon Viewer for an image gallery. I want to get the first image opened when the page is ready. The code:

  <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>

Now I just pass dzi to viewer.openDzi(dzi) and I need first to click on an image to get it shown. How can I pass the dzi of first a? Thanks for help!

Update: I'm using jquery-1.7.1.

bigsky
  • 55
  • 7

1 Answers1

0

I believe with jQuery you can trigger a click on that first link right at start-up, like so:

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

Perhaps a more robust solution would be to attach the DZI info as a data attribute to the a tags, like so:

<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>

By the way, unrelated to the above, you might like to know that there's a new version of Seadragon:

http://openseadragon.github.io/

iangilman
  • 2,144
  • 1
  • 13
  • 16
  • Dear **iangilman**, thanks for your answer! Unfortunately, this script doesn't work. Moreover, the pictures don't get loaded. What version of jquery do you use, by the way? – bigsky Mar 31 '14 at 21:17
  • Just the latest jQuery. Here's a version of the code without the Seadragon part: http://codepen.io/anon/pen/HCLih/ It seems to be doing the right thing. The Seadragon code looks fine too, but I don't know for sure since now I work on OpenSeadragon and the API may have changed. – iangilman Apr 01 '14 at 17:25