Changing images in FSI Viewer JS at runtime

This tutorial will teach you how to change the image used in FSI Viewer at runtime. This can be useful if you have e.g. an online shop where different image thumbnails are situated next to FSI Viewer. If a customer clicks on one of the thumbnails to explore the product details, the image displayed in the FSI Viewer is switched. Instead of reloading the entire page, all you need to do is calling the changeImage function of the FSI Viewer API.

First we create an FSI Viewer instance with some clickable thumbnails:

This creates an FSI Viewer JS instance we can access by it’s id “myViewer” and 3 thumbnail images to click on.

Here we  assign the onClick-events to each of the thumbnails.

Now let’s get to the interesting part of actually changing the image:

In the switchImage function we just get the image source depending on the thumbnail that has been clicked.
In the next step we create a parameters object that assigns the image source string to the fpxsrc parameter.

This object is passed on to the changeImage function of FSI Viewer JS, which loads the new image instantly.