search

openseadragon / openseadragon

An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
http://openseadragon.github.io/
BSD 3-Clause "New" or "Revised" License
3.02k stars 597 forks source link

How to view multiple images #2567

Open Whao510 opened 2 months ago

Whao510 commented 2 months ago

How do I switch from one image to multiple images and make each container independent?

Whao510 commented 2 months ago

https://codepen.io/iangilman/pen/BpwBJe Is there a better way than this?

iangilman commented 2 months ago

You can put multiple images in a single viewer, but they will all zoom and pan together. You can rearrange the images within that single viewer if you want.

If you want each image to zoom and pan separately, you need them to be in separate viewers. If you want them to be independent you don't need to synchronize them at all. If you want them synchronized, that codepen is a good example. I'm not sure what you mean by "better".

Whao510 commented 2 months ago

Sorry, I may not have expressed it clearly. As shown in the picture, I want to click the button below to switch to the main picture, and click the button above to enter the multi-picture view, that is, multiple containers, which can support separate operations. 1723617162420

What I want to know is how to click a button to switch the main image, and whether the switch requires destroying the previous image

pearcetm commented 2 months ago

Since you want the multi-image view to be independently controllable, you'll need to create multiple viewers. You don't necessarily have to destroy and re-create the "main" viewer. You just need to use CSS and javascript to switch between the different layouts that define the sizes and locations of the viewers in your two modes.

Whao510 commented 2 months ago

Since you want the multi-image view to be independently controllable, you'll need to create multiple viewers. You don't necessarily have to destroy and re-create the "main" viewer. You just need to use CSS and javascript to switch between the different layouts that define the sizes and locations of the viewers in your two modes.

Can you tell me specifically how to switch the main image when I click the toggle button? Do I need to re-OpenSeadragon({...}) or replace the tileSources in OpenSeadragon?

iangilman commented 2 months ago

When you have a single viewer and you want to replace the image that's in it, the simplest thing to do is call viewer.open with the new tilesource.

There will be a small flicker after the old image is removed and before the new one arrives. If you want to avoid that, you can do something like https://codepen.io/iangilman/pen/erjyBP.

iangilman commented 2 months ago

Just to be clear, it seems you're asking two questions in this thread:

My most recent comment is responding to the first question. @pearcetm's comment yesterday was responding to the second question.

Whao510 commented 2 months ago

Just to be clear, it seems you're asking two questions in this thread:

  • How to switch the image in a single viewer.
  • How to switch between a single image viewer and a set of multiple viewers.

My most recent comment is responding to the first question. @pearcetm's comment yesterday was responding to the second question.

Thank you very much for your reply, it is very helpful to me