Expandable images in online documentation (thumbnails)

Users of online documentation do not always need every image in full size. In most cases, it is much clearer to initially display images in the text relatively small as thumbnails and give users the option to enlarge an image if necessary. In case your authoring tool doesn't support this feature, it can be added with an appropriate JavaScript library.

The choice of libraries available for this purpose is huge. However, there are significant differences in the usability for the user. While some libraries require a reader to move the mouse over the entire screen and to precisely click on a small button in order to close an enlarged image, this is much more comfortable and faster with other libraries: Simply click anywhere on the screen or scroll on, and the enlarged image turns small again.

Example 1

Click the image to enlarge it. To close the enlarged image, click anywhere on the screen or just keep scrolling:

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

Implementation for example 1

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

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


figure {
  display: inline-block;
  margin: 0 0 0 0;
  width: 100%;
}

Step 2: You can now include an image that is initially to be displayed as a downsized thumbnail in a topic as follows:


<figure>
 <img src='YOUR-IMAGE.png' class='img-zoomable' width="350">
</figure>

Step 3: At the end of the body section of your page template, load the library script and run it with the desired settings:


<script src="YOUR-PATH/zooming.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
 new Zooming({
  bgColor: 'rgb(0,0,0)',
  bgOpacity: 0.90,
  zIndex: 999999991
 }).listen('.img-zoomable')
})
</script>

There are a number of configuration options. See the documentation that comes with the script.

Example 2

Click the image to enlarge it. To close the enlarged image, click anywhere on the screen or just keep scrolling:

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

Implementation for example 2

The solution presented here uses the open-source JavaScript library zoom-vanilla.js.

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/zoom.css">
<script src="YOUR-PATH/zoom-vanilla.min.js"></script>

Step 2: Include each image that you want to be initially displayed as a downsized thumbnail as follows:


<img src='YOUR-IMAGE.png' data-action="zoom" width="350">

___

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!