Introduction

OpenSeadragon

Basic Viewer

Take a look at two modes that help you arrange multiple images

Sequence and Collection Modes

Some exercises to help you practice what you have learned

Module 2 Exercises

Viewer Basics

Look at what to do when your image is huge

Tiled Images

Loading the DZI file into your OpenSeadragon viewer

Loading Your DZI

Automation

Build a pipeline that generates DZI files for you, as well as a data file containing information about all of those files

Pipeline

Module 3 Exercises

Loading the Images

Arrange the images in a trim and proper way

Arranging the Images

Add another arrangement and a toggle button to switch between both

Multiple Arrangements

Module 4 Exercises

Multi-Image

Make clicking in the viewer zoom you directly to whatever image you clicked on

Clicking on Images

Write a custom animation that moves smoothly from one image to another, zooming out in the middle for a nice overview

Custom Animation

Module 5 Exercises

Navigation

Add text overlays to the images to show additional information

HTML Overlays

Track the mouse movement to hide and show the text overlays on hover

Hover

Module 6 Exercises

Conclusion

Overlays

High-resolution imagery is all around us. Once the domain of high-end photography, now even our phones have many megapixels. OpenSeadragon is the premier tool for displaying these images on the web. Other tools exist, but they are either focused on geographic data, or they lack versatility and polish. OpenSeadragon has a lively community and is used throughout the world by artists, libraries, museums, medical/scientific institutions, etc.

With OpenSeadragon, you can display images too big to view on the screen, or even too big to send all at once, and seamlessly transition from low resolution to high resolution with no extra coding. OpenSeadragon works across devices, from tiny phone screens to giant wall displays.

By its very nature (allowing the user to zoom into ultra-high resolution images), OpenSeadragon has a number of very powerful concepts that may not be intuitive at first (tile pyramids, multiple coordinate systems, etc.). This course will give you a solid working understanding of those concepts. We will then dive further into many of the advanced techniques possible with OpenSeadragon to take your app to the next level. Throughout, we will work with real, functioning apps that you will build from start to finish.
  
This course is taught by Ian Gilman, the creator and maintainer of OpenSeadragon.

Transform huge images into immersive experiences

In this course, you'll learn how to prepare and present huge images on the web using OpenSeadragon zooming technology. This course is for web developers who want to create truly unique web front-ends – with a focus on implementing immersive experiences with high-resolution images and interactive overlays using OpenSeadragon and Node.js.

OpenSeadragon Deep Dive

The key concepts behind OpenSeadragon, including tile pyramids and viewport coordinates.

How to collect huge images and convert them into a format suitable for efficient display,using the VIPS command line tool.

How to build a pipeline for converting large numbers of images, using Node.js.

How to display all of the images together in the same viewer.

How to arrange the images however you want, and how to animate between arrangements.

User interaction with the images, including custom animated movement between images, using Tween.js.

Adding overlays with additional information and links, using the OpenSeadragon HTML Overlay plugin.

In the previous lesson, you created a DZI file. Now, you'll load it into the viewer you started in the previous module. This process will require using a local webserver rather than just loading your HTML file directly into the browser; you'll go over that as well.

First, ensure the DZI file and its folder are located next to your other files, like so:

index.html
main.css
main.js
pearl.dzi
pearl_files

 option of your OpenSeadragon viewer. In this case, instead of providing it an object like before, simply give it the URL to your DZI file, like so:

 from module 2, lesson 2, "Sequence and Collection Modes"; they won't have any effect because it's a single image.

If you try running it as before, where you just load it directly into your browser, you'll find you get an error: "Unable to load TileSource". This is because the browser doesn't allow you to open the DZI file directly (for security reasons). Instead, start a local server. There are several ways to do this, but the simplest way on Mac or Linux is to use Python's server (since Python is already installed on those operating systems).

Open a terminal window in your project directory. If your system has Python 2, use:

---
title: Loading Your DZI
description: Loading the DZI file into your OpenSeadragon viewer
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/I01j02rHZU5yhp0101bYwqhkcgghbX200cQo21KIf3NK006sA.m3u8
coverImageUrl: https://image.mux.com/I01j02rHZU5yhp0101bYwqhkcgghbX200cQo21KIf3NK006sA/thumbnail.png?time=85
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_03/lesson_03.02/src
---

## Loading Your DZI

In the previous lesson, you created a DZI file. Now, you'll load it into the viewer you started in the previous module. This process will require using a local webserver rather than just loading your HTML file directly into the browser; you'll go over that as well.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-3-2-Loading-Your-DZI"
/>

### File Organization

First, ensure the DZI file and its folder are located next to your other files, like so:

    index.html
    main.css
    main.js
    pearl.dzi
    pearl_files

### Update the Code

Next, change the `tileSources` option of your OpenSeadragon viewer. In this case, instead of providing it an object like before, simply give it the URL to your DZI file, like so:

```javascript
tileSources: 'pearl.dzi'
```

You can keep the `collectionMode` and `collectionRows` from module 2, lesson 2, "Sequence and Collection Modes"; they won't have any effect because it's a single image.

### Running a Local Server

If you try running it as before, where you just load it directly into your browser, you'll find you get an error: "Unable to load TileSource". This is because the browser doesn't allow you to open the DZI file directly (for security reasons). Instead, start a local server. There are several ways to do this, but the simplest way on Mac or Linux is to use Python's server (since Python is already installed on those operating systems).

In the previous lesson, you made a DZI file.

In this lesson, you'll load it into the viewer you started in the previous

This means it's time to start using a local web server rather than just loading

First, you'll want to make sure the DZI file and its folder are next to your

Then, you'll want to change the tileSources option of your OpenSeadragon viewer

In this case, instead of giving it an object like before, you can just give it

You can keep the collection mode and collection rows from module 0 lesson 2.

They won't have any effect because it's a single image.

If you try running it like before, where you just load it directly into your

you'll find you get an error, unable to load tile source.

This is because the browser doesn't want to let you open the DZI file directly

Instead, we need to actually start up a local server.

There are a number of ways to do this, but the simplest way on Mac or Linux is

Python server since Python is already installed on those OS's to begin with.

If you're on Mac or Linux or have Python installed on your Windows computer,

If your system has Python 2, use this command.

If your system has Python 3, use this command.

If you're on Windows and don't have Python installed, I have a number of other

Then, you can open your page by going to http://localhost:8888 in your browser.

Once you have it running, it should look like this.

It'll serve you well in the upcoming lessons.

For the next lesson, we're going to continue creating DZIs, but now with a