Zoomable images in online documentation

A zoom function enables the users of an online documentation to view even large images in full resolution – for example, an extensive design drawing or a circuit diagram. With a suitable JavaScript library, such a solution can be implemented quickly.

Example

First zoom, and then drag the image:

(Photo of a section of the John Lennon Wall, Prague, 2022)

Implementation

The solution presented here uses the open-source JavaScript library Zoomist.

Step 1: In the head section of your page template, link to the CSS file and to the JavaScript file of the library (adjust the paths as necessary).


<link rel="stylesheet" href="YOUR-PATH/zoomist.min.css">
<script src="YOUR-PATH/zoomist.min.js"></script>

Step 2: Insert the image with the following HTML snippet:


<div id="zoomdemo" data-zoomist-src="YOUR-IMAGE.png"></div>

Step 3: Finally, insert an HTML snippet with the following JavaScript code after the image:


<script>
new Zoomist('#zoomdemo', {
  height: '75%',
  zoomer: true,
  slider: {
    el: false,
    direction: 'horizontal'
  }
})
</script>

The ID contained in the script (zoomdemo in the example) must be the same as the one used for the image.

The script supports various parameters for fine-tuning if required. See the documentation that comes with the script.

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!