This video is available to students only

Clicking on Images

Make clicking in the viewer zoom you directly to whatever image you clicked on

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

In the previous module, you learned how to bring multiple images into the viewer and arrange them as you please. Now, delve into interacting with those images.

By default, clicking in the viewer zooms a little closer to that part of the content. But what if you want to be more specific? In this lesson, make clicking in the viewer zoom directly to whatever image you clicked on.

Disable the Default Behavior#

To start, you'll want to disable the default behavior, so your new code doesn't conflict with it. OpenSeadragon has nuanced options for a number of gestures, broken down by input device. By default, clickToZoom is on for both mouse and pen input, so turn it off for both of them. You can add this to the OpenSeadragon options used when creating the viewer:

Give it a try. You'll see that clicking in the viewer no longer does anything.

For information on all of the gesture controls, visit the OpenSeadragon Options Documentation and scroll down to the gesture settings section.

Openseadragon Click Events#

Now that you've disabled the default click behavior, you can start receiving click events from the viewer and handle them yourself! You need to add a handler for canvas-click events:

OpenSeadragon emits canvas-click any time the pointing device (mouse, touch, pen) lets up in the viewer, regardless of whether it was a quick click or a longer drag. In this case, you are only interested in clicks, so test the event's quick property:

You need to know where the click was. The event has a position property that's in web coordinates relative to the viewer's element. To find out which image was clicked on, convert that position to viewport coordinates, which is how all the images are positioned.

See the coordinate systems section in the introduction to this course for more info on the different coordinate systems.

This lesson preview is part of the OpenSeadragon Deep Dive course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to OpenSeadragon Deep Dive, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course OpenSeadragon Deep Dive