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.

Instructions

  1. Download open seadragon into your MyIIIFGallery Project folder from https://openseadragon.github.io/#download
  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 Glen Robson 2020-11-26 11:36:05
Created by Glen Robson 2020-11-26 11:36:05

results matching ""

    No results matching ""