Merge pull request #6 from IIIF/add-osd-to-showcase

Adds OSD to showcase

source/_data/showcase.yml

@@ -5,7 +5,8 @@
   - >
     An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
   github_url: https://github.com/openseadragon/openseadragon
-  url: http://openseadragon.github.io
+  url: showcase/osd-viewer.html
+
 - name: Mirador Viewer
   id: mirador
   img_url: img/showcase/mirador.jpg
@@ -16,6 +17,7 @@
     annotations.
   github_url: https://github.com/IIIF/mirador
   url: showcase/mirador-viewer.html
+
 - name: Loris IIIF Image Server
   id: loris
   img_url: img/showcase/loris.jpg
@@ -25,6 +27,7 @@
     Image API ver 1.1. Loris supports JPEG and TIFF sources as well as JPEG2000.
   github_url: https://github.com/pulibrary/loris
   url: showcase/loris-server.html
+
 - name: Wellcome Player
   id: wellcome
   img_url: /img/showcase/wellcome-player.jpg
@@ -35,6 +38,7 @@
     audio files.
   github_url: https://github.com/wellcomelibrary/player
   url: showcase/wellcome-player.html
+
 - name: Home Fractals
   id: fractals
   img_url: img/showcase/home-fractals.jpg

source/css/main.scss

@@ -619,11 +619,16 @@ a.button-turquoise {
   width: 100%;
 }
 
-.sub-pages-container section.showcase iframe {
+.sub-pages-container section.showcase iframe,
+.sub-pages-container section.showcase #iiif-demo {
   width: 100%;
   height: 500px;
 }
 
+.sub-pages-container section.showcase #iiif-demo {
+  border: 1px solid #ccc;
+}
+
 /* flip animation */
 .sub-pages-container section.showcase .isotope-item {
   perspective: 1000;

source/showcase/osd-viewer.html

@@ -0,0 +1,64 @@
+---
+title: "Showcase : OpenSeadragon Viewer"
+id: showcase-osd
+categories: [pages]
+layout: sub-page
+---
+
+<section class="showcase showcase-item wrapper">
+  {% include showcase_return.html %}
+  <div id="iiif-demo"></div>
+  <script src="http://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
+  <script type="text/javascript">
+    OpenSeadragon({
+      id:                 "iiif-demo",
+      prefixUrl:          "http://openseadragon.github.io/openseadragon/images/",
+      preserveViewport:   true,
+      visibilityRatio:    1,
+      defaultZoomLevel:   1,
+      tileSources:   [{
+        "@context": "http://library.stanford.edu/iiif/image-api/1.1/context.json",
+        "@id": "http://libimages.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2",
+        "formats": [ "jpg", "png", "gif" ],
+        "height": 3600,
+        "profile": "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level2",
+        "qualities": [ "native", "bitonal", "grey", "color" ],
+        "scale_factors": [ 1, 2, 4, 8, 16 ],
+        "tile_height": 256,
+        "tile_width": 256,
+        "width": 2617
+      },{
+        "@context": "http://library.stanford.edu/iiif/image-api/1.1/context.json",
+        "@id": "http://libimages.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2",
+        "formats": [ "jpg", "png", "gif" ],
+        "height": 3600,
+        "profile": "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level2",
+        "qualities": [ "native", "bitonal", "grey", "color" ],
+        "scale_factors": [ 1, 2, 4, 8, 16 ],
+        "tile_height": 256,
+        "tile_width": 256,
+        "width": 2694
+      },{
+        "@context": "http://library.stanford.edu/iiif/image-api/1.1/context.json",
+        "@id": "http://libimages.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2",
+        "formats": [ "jpg", "png", "gif" ],
+        "height": 3600,
+        "profile": "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level2",
+        "qualities": [ "native", "bitonal", "grey", "color" ],
+        "scale_factors": [ 1, 2, 4, 8, 16 ],
+        "tile_height": 256,
+        "tile_width": 256,
+        "width": 2717
+      }]
+    });
+  </script>
+
+  <p>
+    {% for item in site.data.showcase %}
+      {% if item.id == "mirador" %}
+        <p>{{ item.desc }}</p>
+        {% if item.github_url %} <a href="{{ item.github_url }}" target="_blank" class="button-turquoise">GitHub</a> {% endif %}
+      {% endif %}
+    {% endfor %}
+  </p>
+</section>