Image zoom widget

The Image zoom widget allows users to closely inspect details of an image by magnifying it, providing a more immersive and interactive experience. Follow the steps below to add the image zoom widget to your Ghost CMS website using Ghost code injection.

Image zoom widget library

At the base of this widget is Medium zoom, which is a JavaScript library for zooming images like Medium. To add this to your Ghost CMS website add the following scripts in your Code Injection:

<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
<script>mediumZoom('.kg-image-card img,.kg-gallery-card img')</script>

The first <script> loads the library, the second is sets up the library defining the relevant the elements/images. In our case we are targeting <img> elements from the image cards or the image galleries of Ghost. You can extend to any image by changing the selector.

Additionally, there are options you can provide when initializing the library:

• margin (default: 0) — the space outside the zoomed image
• background (default: #fff) - the background of the overlay
• scrollOffset (default: 40) - the number of pixels to scroll to close the zoom
• container (default: null) - the viewport to render the zoom in
• template (default: null) - the template element to display on zoom

Image zoom widget style link

The library includes basic styling and for this you need to include the following link in your Code Injection:

<link href="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/style.min.css" rel="stylesheet">

You have the option to create your own styles, or overwrite the ones the library comes with by targeting the classes used.