OpenSeadragon 4.1.1

Multi-Image

You can load as many images as you want into the same viewer. You'll just need to arrange them how you like.

Here are some examples of what you can do with OpenSeadragon multi-image:

Adding Multiple Images

When creating your viewer, you can pass multiple tile sources into the tileSources option. Once you've created the viewer, you can also pass an array into Viewer.open(). If you just want to add additional images to a viewer that already has images loaded, you can use Viewer.addTiledImage(). All of these venues allow you to specify the image location and scaling. For example:

viewer.addTiledImage({
    tileSource: 'my-image.dzi',
    x: 5,
    y: 0,
    width: 10
});

If you specify the width, it will set the height automatically based on the aspect ratio; likewise for width if you specify height. It's entirely up to you where and how big you place your images, regardless of their resolution. You can mix high-resolution and low-resolution images side by side.

Working with the Images in the Viewer

Once you've added your images, you can access them via the viewer's World. For example:

var i, tiledImage;
var count = viewer.world.getItemCount();
for (i = 0; i < count; i++) {
    tiledImage = viewer.world.getItemAt(i);
    tiledImage.setPosition(new OpenSeadragon.Point(i, 0));
}

You can also use World.arrange() to arrange the images for you.