Building a Gallery Viewer With Open Seadragon

Activity Description

In this activity we want to start combining IIIF we re-usable libraries that allow us to do more advanced things. In this activity we are going to add the library openseadragon.js to a basic webpage and provide it with information from a IIIF server that it can use to display images.


  1. Download open seadragon into your MyIIIFGallery Project folder from
  2. In one of your image viewing pages (e.g. "image1.html" add the Seadragon Library
    • <script src="openseadragon-bin-2.3.1" type="text/javascript"></script>
  3. Replace your <img> tag with an empty div for the openseadragon library to create a view port
    • <div id="myImage" style="width: 400px"></div>
  4. Create a basic openseadragon object

       const imageurl = //path to info.json file, e.g. http://myimageserver/myimage/info.json
       var viewer = OpenSeadragon({
         id: "myImage",
         prefixUrl: "openseadragon-bin-2.3.1/images/",
         tileSources: [infojson]
Last modified by Peter Broadwell 2019-06-01 04:44:54
Created by Peter Broadwell 2019-06-01 04:44:54

results matching ""

    No results matching ""