Curio Lane
Home Page

OpenSeadragon

An open-source project for displaying high-resolution, zoomable images for the web.

OpenSeadragon is an open-source project for displaying high-resolution, zoomable images for the web. You can easily embed it in your own website and customize it to showcase your images. It supports a variety of content types, but we primarily use it for:

You can learn more about OpenSeadragon from their official website, openseadragon.github.io, or from their open source project, github.com/openseadragon.

Hosted Preview

We offer a hosted page to quickly preview OpenSeadragon with your own content. Visit the page and provide your content link, or encode it in the iiif-image or dzi query parameter to link directly.

Self-hosting

For publishing, we recommend using your own configuration of OpenSeadragon. You can find official installation instructions on openseadragon.github.io. For a basic, standalone page the process looks like:

1

Import the openseadragon package.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/openseadragon.min.js"
  integrity="sha512-VKBuvrXdP1AXvfs+m4l3ZNZSI4PFJF0K0hGJJZ4RiNRkvFMO4IwFRHkoTc7xsdZhMgkLn+Ioq4elndAZicBcRQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"></script>
2

Add an element to the web page where it can render the image and interface.

<div id="openseadragon" style="width:800px;height:600px"></div>
3

Configure the interface and provide a source for the image. The tileSources option will depend on the type of content you want to show — learn more from official documentation.

<script type="text/javascript">
  OpenSeadragon({
    id: "openseadragon",
    prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
    tileSources: "https://hosted.example.com/path/image.dzi"
  });
</script>