Sequence and Collection Modes

[00:00 - 00:08] In the previous lesson, we made a simple OpenSeadragon viewer with a single image in it. Sometimes that's all you'll need, but in many scenarios you'll want to present multiple images.

[00:09 - 00:16] In this lesson, we'll cover two ways to do that, Sequence Mode and Collection Mode. OpenSeadragon has a couple of easy modes for showing multiple images.

[00:17 - 00:29] You may have noticed that the tile source option property is called tileSources, 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 fact, give it an array instead.

[00:30 - 00:35] Here's another image URL, but feel free to grab your own. Here it is as a tile source along with the other one.

[00:36 - 00:42] 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.

[00:43 - 00:57] We'll get into rearranging images in a future module, but meanwhile, there are some simple helpers for automatically arranging them or stepping through them. 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 image to image.

[00:58 - 01:07] Like so. 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.

[01:08 - 01:16] Collection Mode has a number of options to customize the arrangement. To put the images horizontally next to each other, add the option collectionRows: 1.

[01:17 - 01:28] There's a whole page on the OpenSeadragon website about customizing Collection Mode. The feature only goes so far, so if you really want control over the layout, you'll want to arrange the images yourself.

[01:29 - 01:40] 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 JavaScript is going to be growing, so let's break the JavaScript and CSS out into their own files.

[01:41 - 01:48] 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.

[01:49 - 01:58] Do the same with your JavaScript code, pulling it out of the script tag, and putting it in a file called main.js. Replace it in the HTML with this script tag.

[01:59 - 02:04] That'll give us room to grow. You now have multiple images in your viewer and a couple of ways to present them.

[02:05 - 02:13] So far, we've been working with images that haven't been converted for efficient delivery. That's fine for screen resolution images, but we want to be able to share gigantic images.

[02:14 - 02:26] 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 learned so far.