Clicking on Images
Make clicking in the viewer zoom you directly to whatever image you clicked on
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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:
xxxxxxxxxx
gestureSettingsMouse: {
clickToZoom: false
},
gestureSettingsPen: {
clickToZoom: false
}
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:
xxxxxxxxxx
viewer.addHandler('canvas-click', (event) => {
// Handle the click.
});
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:
xxxxxxxxxx
if (!event.quick) {
return;
}
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.
Get unlimited access to OpenSeadragon Deep Dive, plus 70+ \newline books, guides and courses with the \newline Pro subscription.