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 the previous lesson, you created a simple OpenSeadragon viewer with a single image. Sometimes, that's all you need, but often, you'll want to present multiple images. In this lesson, you'll discover two ways to do that: sequence mode and collection mode.

OpenSeadragon provides a couple of straightforward modes for displaying multiple images. You may have noticed that the tile source option property is named 

, which suggests you can load more than one at a time. So far, you've only been putting a single tile source in there, but in fact, you can give it an array instead.

Here's another image URL, but feel free to use your own:

https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8

tileSources: [
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
  },
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8'
  }
]

If you run it, you'll see only the new image, not the original one. This is because they are stacked on top of each other. You'll delve into rearranging images in a future module, but in the meantime, there are some simple helpers for automatically arranging them or stepping through them.

 to your options, the viewer will display one image at a time, with buttons that allow the user to go from one image to another. Give it a try!

---
title: Sequence and Collection Modes
description: Take a look at two modes that help you arrange multiple images
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/S4Qt9s6cwR9GK3IR6JsfWSAXmHXC00IWuaR402nJ8NygU.m3u8
coverImageUrl: https://image.mux.com/S4Qt9s6cwR9GK3IR6JsfWSAXmHXC00IWuaR402nJ8NygU/thumbnail.png?time=9
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_02/lesson_02.02/src
---

## Sequence and Collection Modes

In the previous lesson, you created a simple OpenSeadragon viewer with a single image. Sometimes, that's all you need, but often, you'll want to present multiple images. In this lesson, you'll discover two ways to do that: sequence mode and collection mode.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-2-2-Sequence-and-Collection-Modes"
/>

### Adding More Images

OpenSeadragon provides a couple of straightforward modes for displaying multiple images. You may have noticed that the tile source option property is named `tileSources`, which suggests you can load more than one at a time. So far, you've only been putting a single tile source in there, but in fact, you can give it an array instead.

Here's another image URL, but feel free to use your own:

`https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8`

Here it is, along with the other image:

```javascript { actualFilename=./protected/src/main.js endChar=408 endLine=16 startChar=173 startLine=7 statedFilename=main.js url=https&#x3A;//gitlab.com/fullstackio/books/openseadragon-deep-dive/module_02/lesson_02.02/protected/src/main.js#L7 }
tileSources: [
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
  },
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8'
  }
]
```

If you run it, you'll see only the new image, not the original one. This is because they are stacked on top of each other. You'll delve into rearranging images in a future module, but in the meantime, there are some simple helpers for automatically arranging them or stepping through them.

### Sequence Mode

If you add `sequenceMode: true` to your options, the viewer will display one image at a time, with buttons that allow the user to go from one image to another. Give it a try!

### Collection Mode

Alternatively, if you add `collectionMode: true` to your options (remember to remove the `sequenceMode` option) and run it again, you should now see both images stacked vertically above each other. Collection mode offers a number of options to customize the arrangement. To display the images horizontally next to each other, add the option `collectionRows: 1`.

In the previous lesson, we made a simple OpenSeadragon viewer with a single

Sometimes that's all you'll need, but in many scenarios you'll want to present

In this lesson, we'll cover two ways to do that, Sequence Mode and Collection

OpenSeadragon has a couple of easy modes for showing multiple images.

You may have noticed that the tile source option property is called

which implies you can load more than one at a time.

So far, we've only been putting a single tile source in there, but you can, in

Here's another image URL, but feel free to grab your own.

Here it is as a tile source along with the other one.

If you run it, you'll see only the new image, not the original one.

This is because by default they are stacked on top of each other.

We'll get into rearranging images in a future module, but meanwhile, there are

for automatically arranging them or stepping through them.

If you add sequenceMode: true to your options, the viewer will display one

with buttons that allow the user to go from image to image.

If instead you add collectionMode: true to your options, and run again,

now you'll see both of the images stacked vertically above each other.

Collection Mode has a number of options to customize the arrangement.

To put the images horizontally next to each other, add the option

There's a whole page on the OpenSeadragon website about customizing Collection

The feature only goes so far, so if you really want control over the layout,

you'll want to arrange the images yourself.

We'll go into depth on that in an upcoming module.

So far, we've been coding all the same HTML file, but soon enough our

so let's break the JavaScript and CSS out into their own files.

Take the CSS code out of the style tag and put it in a file called main.css.

Replace it in the HTML with this link tag.

Do the same with your JavaScript code, pulling it out of the script tag,

Replace it in the HTML with this script tag.

You now have multiple images in your viewer and a couple of ways to present

So far, we've been working with images that haven't been converted for

That's fine for screen resolution images, but we want to be able to share

In the next module, you'll learn how to convert your images into tile pyramids,

so users don't have to download huge amounts of data.

But first, see the next lesson for some exercises to practice what you've

Sequence and Collection Modes

Adding More Images#

Sequence Mode#

Collection Mode#