Skip to content
Add curtain and sync modes to OpenSeadragon.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src minify src js assets, add copyright to demo Dec 31, 2018
.gitignore
LICENSE.txt add LICENSE.txt Jan 2, 2019
README.md fix typo in readme Jan 3, 2019

README.md

Curtain & Sync Modes for OpenSeadragon

This library is an extension for OpenSeadragon that enables side-by-side, syncronized image viewing. This extension will add the "curtain" and "sync" view modes to any OpenSeadragon viewer.

Curtain mode overlays images on top of each other and reveals more or less of each image based on your cursor position.

Sync mode shows images side-by-side but keeps each image in sync as the user zooms or pans.

Demo

View the demo here

*All images courtesy of The Leiden Collection

Install

  1. Download and install OpenSeadragon.
  2. Include openseadragon-curtain-sync.min.js on your page.

Getting Started

This library includes only the javascript for extending OpenSeadragon. It does not include any of the UI elements for interacting with the CurtainSyncViewer. You may use any of the default configuration options, but must include the new images option which is specific to this plugin.

First, initialize the viewer (note: this example uses IIIF for image tiling).

var viewer = new CurtainSyncViewer({

  // default options
  container: document.querySelector('#viewer'),

  // images used by the viewer (2 or more).
  // "key" (string) - a unique string used to target this image.
  // "shown" (boolean) - whether the image is on/off when page is loaded.
  images: [
    {
      key: 'my-key-1',
      tileSource: 'https://url-to-iiif-manifest.json',
      shown: true
    },
    {
      key: 'my-key-2',
      tileSource: 'https://url-to-iiif-manifest.json',
    }
  ],

});

Second, implement the UI for interacting with the new view modes. Below is a simple example using jQuery. For a more detailed example, see the demo.

// show an alternate image
$('#myButton').on('click', function(e){
  viewer.setImageShown('my-key-2', true);
});

// switch view mode ("curtain" or "sync")
$('#myButton').on('click', function(e){
  viewer.setMode('curtain');
});

Methods

The following new methods are now available on the viewer instance.

Method Args Description
getImageShown key Returns true or false for a given image key.
setImageShown key,
shown
Shows or hides an image key based on the shown arguement.
getMode none Returns the current viewer mode.
setMode mode Sets the mode for the viewer (mode = "curtain" or "sync"). If no key is provided, it will default to "sync" mode.

Example:

var viewer = new CurtainSyncViewer(options);
viewer.setMode('sync');

DZI Image Sources

Each image in the demo and examples above use IIIF for the TileSource which makes things super easy. However, you can also choose to use any of the OpenSeadragon supported DZI image formats. An example would look like:

var viewer = new CurtainSyncViewer({
  container: document.querySelector('#viewer'),
  images: [
    {
      key: 'my-key-1',
      tileSource: {
        Image: {
          xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
          Url: 'https://url-to-your-image-tiles-folder',
          Format: 'jpg',
          Overlap: '1',
          TileSize: '128',
          Size: {
            Width:  '5183',
            Height: '6539'
          }
        }
      },
      shown: true
    },
    {
      key: 'my-key-2',
      tileSource: {
        Image: {
          xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
          Url: 'https://url-to-your-image-tiles-folder',
          Format: 'jpg',
          Overlap: '1',
          TileSize: '128',
          Size: {
            Width:  '5183',
            Height: '6539'
          }
        }
      },
    }
  ],
});
You can’t perform that action at this time.