How to sync multiple ImageViewers using Image Viewer Sync

#1 Posted : Friday, June 16, 2017 1:58:51 PM(UTC)

Nick Villalobos

Groups: Registered
Posts: 119

Was thanked: 4 time(s) in 4 post(s)

File Attachment(s):

ImageViewerSync.zip (481kb) downloaded 266 time(s).

Attached you will find a JavaScript project that has two ImageViewers synchronized together and will allow you to zoom in/out, scroll on the image and fit the images to how they were originally loaded.

It will only take you one line of code to sync the viewers together once you have them set up:

Code:

lt.Controls.ImageViewer.sync([imageViewer1, imageViewer2]);

To view all the code for setting this up, you can open the App.js file within the project.

Here is a GIF so you can see exactly what the demo application will do:
ViewGif

KEY FOR USING DEMO:
Ctrl + Left Mouse Click (on viewer) + *moves mouse up and down* = Zoom In/Out

Left Mouse Click (on viewer) + *moves mouse left and right* = Moves images left/right (if zoomed)

Double Left Mouse Click (on viewer) = Fit image to original loading state

Nick Villalobos
Developer Support Engineer
LEAD Technologies, Inc.

Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads

Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

How to sync multiple ImageViewers using Image Viewer Sync