Openseadragon simple image

0
votes

I am trying to build something, using exist-db and openseadragon:

My file structure can be found in the link. click here inside, I have the according files. For now, I want to use simple images with openseadragon in show.html (located in pages. as all my html-files are stored in that folder.)

my show.html looks like this: 

<div class="content-container">
<div class="column">blablabla</div>
<div class="column" id="dragon-container">
<div id="seadragon-viewer" style="height:600px; width:100%; position:right;"/>
</div>

var viewer = OpenSeadragon({ id: "seadragon-viewer", tpye: "image", url: "/data/images/Page0001.JPG" }); 
    </div>

This is what I get. An empty openseadragon-div with the navigation toggle.

I first thought I messed up the URL and added "../" (or any other location) to it, but to no avail. Can anyone point me in the right direction?

After I got Page0001.JPG to display, I'll make a Sequence out of the 18 pictures that I have (and sync the openseadragon-viewer to the divs containing the accompanying text)

This is just a first step, I think I'll be going for DZIs afterwards. However, I have only crappy fotos for now and I'll have to take better ones, so why not make a "concept" before I add the final pictures (+ I want to learn something!)

thanks in advance!

1
javascripthtmlopenseadragon

1 Answers

0
votes

You need to put the image specification in your tileSources property, like so:

var viewer = OpenSeadragon({ 
  id: "seadragon-viewer", 
  tileSources: {
    type: "image", 
    url: "/data/images/Page0001.JPG" 
  }
});