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 huge images for immersive viewing on the web using OpenSeadragon zooming technology.

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 module 3, you built a pipeline that generated DZI files for you to use, as well as an 

 file with information about all of those files. Now, take your sample viewer from module 2 and add those images to it.

 option. Start with the code from module 2, lesson 2, "Sequence and Collection Modes". You'll need to fetch the JSON, which means your code now needs to be async. You can do that by making an async function and calling it right away, like so:

const main = async () => {
  // The code is placed here.
};

main();

 API to grab the file. Once you get the response, you can use its 

 function to convert the JSON text into an object you can use.

const main = async () => {
  const response = await fetch('image-data.json');
  const imageData = await response.json();

Once you have the image data in a readable format, you can go through and make a set of tile sources with it, like so:

const tileSources = imageData.images.map((imageRec) => {
  return imageRec.imageUrl;
});

---
title: Loading the Images
description: Load the images into the viewer
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/rTlb00vIOjMe2ePXaY6fN2PFAfJLUb00Nm00TslH1ZxTok.m3u8
coverImageUrl: https://image.mux.com/rTlb00vIOjMe2ePXaY6fN2PFAfJLUb00Nm00TslH1ZxTok/thumbnail.png?time=116
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_04/lesson_04.01/src
---

## Multi-Image

In module 3, you built a pipeline that generated DZI files for you to use, as well as an `image-data.json` file with information about all of those files. Now, take your sample viewer from module 2 and add those images to it.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-4-1-Loading-the-Images"
/>

### Loading the Images

To begin, load the `image-data.json` and use that to build your `tileSources` option. Start with the code from module 2, lesson 2, "Sequence and Collection Modes". You'll need to fetch the JSON, which means your code now needs to be async. You can do that by making an async function and calling it right away, like so:

```javascript
const main = async () => {
  // The code is placed here.
};

main();
```

Use the browser's `fetch` API to grab the file. Once you get the response, you can use its `json` function to convert the JSON text into an object you can use.

```javascript { actualFilename=./protected/src/main.js endChar=120 endLine=3 startChar=0 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/openseadragon-deep-dive/module_04/lesson_04.01/protected/src/main.js }
const main = async () => {
  const response = await fetch('image-data.json');
  const imageData = await response.json();
```

Once you have the image data in a readable format, you can go through and make a set of tile sources with it, like so:

```javascript { actualFilename=./protected/src/main.js endChar=216 endLine=7 startChar=122 startLine=5 statedFilename=main.js url=https&#x3A;//gitlab.com/fullstackio/books/openseadragon-deep-dive/module_04/lesson_04.01/protected/src/main.js#L5 }
const tileSources = imageData.images.map((imageRec) => {
  return imageRec.imageUrl;
});
```

In module 3, you build a pipeline that generated DZI files,

as well as a JSON file with information about all the files.

Now you'll take the sample viewer from module 2 and add those images to it.

For starters, we'll load the image-data.json and use that to build our

Start with the code from module 2 lesson 2.

We'll need to fetch the JSON, which means our code now needs to be asynchronous

We can do that by making an async function and calling it right away, like so.

We'll use the browser's fetch API to grab the file.

Once we get the response, we can use its JSON function to convert the JSON text

Once we have the image-data in a readable format, we can go through and make a

Note that we are just using the DZI URLs as tile sources rather than the object

There are many different ways to specify tile sources, and these are just a

Since we were using non-tiled images in module 2, we had to specify them using

With DZI, OpenSeadragon knows how to open the DZI file and read the info from it,

which is generally the easiest thing to do.

You can, however, also specify a DZI tile source directly as an object, like so

Note that this is all the information from the DZI file.

This can be handy if you have a lot of DZI files and you want to save yourself

You can load all of the data from them in a single call to the server and

Anyway, we don't need that extra control, so we'll just stick with the

Remember to use your local server as discussed in module 3 lesson 2.

Opening the HTML file directly in your browser won't work.

You should see all the images you converted lined up in a single row.

It's laid out like this because we're using the collection mode option with

collection rows 1, as discussed in module 3 lesson 2.

You're now loading all your converted images into the viewer.

In the next lesson, we'll get into the multi-image API so you can arrange them,