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!

 to your options (remember to remove the 

 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 

For more information about customizing the collection mode, see 

. However, if you truly want control over the layout, you'll need to arrange the images yourself. You'll delve into that in an upcoming module.

So far, you've been writing all your code in the same HTML file, but soon, your JavaScript is going to expand, so it's time to separate the JavaScript and CSS into their own files.

Do the same with your JavaScript code, removing it from the 

Here's what your code should look like at this point:

const options = {
  id: 'osd-container',
  prefixUrl:
    'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/',
  collectionMode: true,
  collectionRows: 1,
  tileSources: [
    {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
    },
    {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8'
    }
  ]
};

const viewer = OpenSeadragon(options);

body {
  margin: 0;
}

#osd-container {
  width: 100vw;
  height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Newline OpenSeadragon</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
  </head>
  <body>
    <div id="osd-container"></div>
    <script src="main.js"></script>
  </body>
</html>

You now have multiple images in your viewer, with a couple of ways to present them. So far, you've been working with images that haven't been converted for efficient delivery. That's fine for screen-resolution images, but you want to be able to share gigantic images! In the next module, you'll learn how to convert images into tile pyramids so users don't have to download enormous amounts of data.

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

---
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/newline-guide-to-displaying-huge-images-with-openseadragon/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`.

![Collection mode screenshot](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.02/public/collection-mode.jpg)

For more information about customizing the collection mode, see [here](https://openseadragon.github.io/examples/tilesource-collection/). However, if you truly want control over the layout, you'll need to arrange the images yourself. You'll delve into that in an upcoming module.

### A Little Organization

So far, you've been writing all your code in the same HTML file, but soon, your JavaScript is going to expand, so it's time to separate the JavaScript and CSS into their own files.

Extract the CSS code from the `<style>` tag and place it in a file named `main.css`. Replace it in the HTML with:

```html
<link rel="stylesheet" type="text/css" href="main.css" />
```

Do the same with your JavaScript code, removing it from the `<script>` tag and placing it in a file named `main.js`. Replace it in the HTML with:

```html
<script src="main.js"></script>
```

That'll give you room to grow!

## Full Code

Here's what your code should look like at this point:

```javascript { actualFilename=./protected/src/main.js endChar=452 endLine=20 startChar=0 startLine=1 statedFilename=main.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.02/protected/src/main.js }
const options = {
  id: 'osd-container',
  prefixUrl:
    'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/',
  collectionMode: true,
  collectionRows: 1,
  tileSources: [
    {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
    },
    {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8'
    }
  ]
};

const viewer = OpenSeadragon(options);
```

```css { actualFilename=./protected/src/main.css endChar=75 endLine=9 startChar=0 startLine=1 statedFilename=main.css url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.02/protected/src/main.css }
body {
  margin: 0;
}

#osd-container {
  width: 100vw;
  height: 100vh;
}
```

```html { actualFilename=./protected/src/index.html endChar=390 endLine=14 startChar=0 startLine=1 statedFilename=index.html url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.02/protected/src/index.html }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Newline OpenSeadragon</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
  </head>
  <body>
    <div id="osd-container"></div>
    <script src="main.js"></script>
  </body>
</html>
```

## Conclusion

You now have multiple images in your viewer, with a couple of ways to present them. So far, you've been working with images that haven't been converted for efficient delivery. That's fine for screen-resolution images, but you want to be able to share gigantic images! In the next module, you'll learn how to convert images into tile pyramids so users don't have to download enormous amounts of data.

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


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

Sequence and Collection Modes

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

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript