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.


First zoom, and then drag the image:

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


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:

new Zoomist('#zoomdemo', {
  height: '75%',
  zoomer: true,
  slider: {
    el: false,
    direction: 'horizontal'

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!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.