cleanup, add openseadragon

dhsi/SUMMARY.md

@@ -18,6 +18,7 @@
 ## Tuesday, Session 3: 9:00am-10:15am**
 
 1. [Reflection on using the IIIF Image API](day-two/reflections.md)
+2. [OpenSeadragon](day-two/openseadragon.md)
 2. [IIIF Presentation API Overview](day-two/presentation-api.md)
 3. [Exercise - Create a Manifest](day-two/manifest-exercise.md)
       1. [Bodleian (V2)](day-two/bodleian-editor/README.md)
@@ -55,7 +56,6 @@
    3. [Annona](day-two/annona.md)
    4. [Clover](day-two/clover.md)
    5. [Navplace viewer](day-two/navplace.md)
-   6. [OpenSeadragon](day-two/openseadragon.md)
 2. [Work Period]((day-two/configuring-viewers.md#work-period))
 
 ## Wednesday, Session 7: 9:00am-10:15am

dhsi/day-three/annotorious.md

@@ -4,10 +4,9 @@ Annotorious is a JS library you can easily build into a browser. Slightly differ
 ## Using Annotorious
 This view is making use of three plugins (toolbar, georeference and extended shapes beyond polygon and rectangle). Configuration is VERY well documented for the [out of the box Annotorious](https://annotorious.github.io/api-docs/osd-plugin/) including configuration and custom events and the [plugins](https://annotorious.github.io/plugins/). 
 
-<iframe src="annotorious-embed.html" style="width: 100%; height: 600px">
 
-```
 
+```
 <!-- CSS stylesheet -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious.min.css">
 
@@ -38,4 +37,9 @@ This view is making use of three plugins (toolbar, georeference and extended sha
     Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withMouse': true});
   }
 </script>
-```
+```
+<a href="annotorious-embed.html" target="_blank">Annotorious page</a>
+
+<iframe src="annotorious-embed.html" style="width: 100%; height: 600px">
+
+

dhsi/day-two/configuring-viewers.md

@@ -12,6 +12,9 @@ For example:
 
 There are many options here. We're going to focus on two highly customizable viewers: Mirador and Universal Viewer. First, we're going to look at how to embed a viewer in your own project (to do this, we'll continue to use or "Custom Image Viewers" projects). Then we'll walk through several of the configuration option. Then we'll turn this into a work period, where you can start embedding a viewer into your project and adjust the configuration settings as needed. We'll come around and help you customize your project any way you want.
 
+## Viewers not covered
+Tify, IIIF Curation Viewer and Diva.js all have videos and demo pages to play with at [https://iiif.io/guides/using_iiif_resources/#tools-for-viewing-manifests](https://iiif.io/guides/using_iiif_resources/#tools-for-viewing-manifests).
+
 ## Mirador
 
 ### Embedding Mirador

dhsi/day-two/openseadragon.md

@@ -0,0 +1,52 @@
+# OpenSeadragon
+OpenSeadragon is a zoomable image viewer that will work with almost any kind of image including a IIIF image. It is also used in almost every IIIF viewer we are going to show you in this class.
+
+OpenSeadragon also has a [plethora of plugins](https://openseadragon.github.io/#plugins) which we will not be covering in this class. There is also a [OpenSeadragon codepen](https://codepen.io/collection/APoyjJ/) which displays various configurations and the code to create them.
+
+There are two sets of documents you will want to know in order to work with OpenSeadragon. [https://openseadragon.github.io/docs/](https://openseadragon.github.io/docs/) which has everything from simple to complicated implementation docs for OpenSeadragon and the examples listed on the [homepage](https://openseadragon.github.io/) which will provide different implementations for types of images, etc.
+
+## Implementation
+All you need for OpenSeadragon to work is a [IIIF image(s)](https://openseadragon.github.io/examples/tilesource-iiif/). The example below is built to work with both a single image and multiple. Make sure your container has a width and height otherwise it will not render properly.
+
+
+
+```
+<div id="openseadragoncontainer" style="width: 800px; height: 600px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/openseadragon.min.js"></script>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id: "openseadragoncontainer", //this id matches the container id
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/images",
+        sequenceMode: true,
+        tileSources: [
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"
+        ]
+    });
+</script>
+```
+
+<div id="openseadragoncontainer" style="width: 800px; height: 600px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/openseadragon.min.js"></script>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id: "openseadragoncontainer", //this id matches the container id
+        sequenceMode: true,
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/images/",
+        tileSources: ["https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"]
+    });
+</script>
+
+## Exercise
+Place your images in OpenSeadragon. What are the limitations of this approach?