Basic Viewer

[00:00 - 00:05] Every journey starts with a single step. Let's start this one with the simplest possible OpenSeadragon viewer you can make.

[00:06 - 00:13] In this module, you'll create a basic viewer that loads an image to fill the web page. We'll start with a basic web page template.

[00:14 - 00:18] We need to add the OpenSeadragon library. You can find a number of options here.

[00:19 - 00:31] For this example, we'll use the CDNJS version. Now, in the script tag in the body, we want to create a new OpenSeadragon viewer.

[00:32 - 00:35] This won't actually do anything. We need to give it some settings in the options object.

[00:36 - 00:42] At the bare minimum, we need to tell it where to go on the page and what image to load. So, we need a div for it to live in.

[00:43 - 00:53] Since we're just running this straight on the web page, you'll want to make sure that the div is above the script tag where we create the viewer. Otherwise, the div won't exist yet when the viewer is created and you'll get an error.

[00:54 - 01:02] Now, include the ID for that div in the options so that OpenSeadragon knows about it. OpenSeadragon doesn't support generic selectors, just IDs.

[01:03 - 01:14] You can, however, supply an element instead. For example. OpenSeadragon is most powerful when using specially prepared images broken up into tiles, but it can work with simple images as well.

[01:15 - 01:19] For starters, let's do that. I went to Unsplash and grabbed this URL to an image.

[01:20 - 01:32] OpenSeadragon takes a tileSources setting in its options object that can take different kinds of images. For this sort of single image, you pass it an object with type "image" and an URL for that image, like so.

[01:33 - 01:39] Okay, we have the bare necessities in. You can run it by starting a local server or even just loading the page into your browser directly.

[01:40 - 01:49] Give it a try, but you'll see that all you get is an empty page, so there's one more thing we need to do. The OpenSeadragon viewer automatically fills whatever space you give it in the container div.

[01:50 - 01:55] It doesn't change the size of the div itself. Because of this, you always need to style your container to have some width and height.

[01:56 - 02:02] Otherwise, you'll get a zero pixel viewer. So let's add some CSS to the styles section of the page.

[02:03 - 02:06] Reload the page, and now it should work. You should see the image filling the window.

[02:07 - 02:15] Use the scroll wheel on your mouse to zoom the image and drag with the mouse to pan. If you're using a trackpad instead of a mouse, it should have a scroll gesture.

[02:16 - 02:21] For instance, the two finger drag that works for zoom. Some trackpads will also support pinch to zoom.

[02:22 - 02:29] If you test on a touch device, you can pinch to zoom directly on the viewer. If refreshing the page doesn't work, your browser may have cached the previous version.

[02:30 - 02:36] To avoid this, I have Chrome's developer console set to no cache when the console is open. There are a couple of minor issues.

[02:37 - 02:43] The OpenSeadragon buttons don't have their icon images for starters. That can be fixed by giving the prefix URL for those images in the options, like so.

[02:44 - 02:56] We're using the URL from CDNJS to match where the library came from. The other issue, if you really want the viewer to fill the page, is that the browser by default has an 8px margin.

[02:57 - 03:03] We can fix that with a little CSS. The result should look like this after you've zoomed a little.

[03:04 - 03:09] There you have it. You've made your first OpenSeadragon viewer.

[03:10 - 03:20] It may seem humble, but it's a good foundation for what's to come. In the upcoming lessons, we'll go into more depth on how to customize it for your needs, starting with adding multiple images in the next lesson.