Organize your blog, newsletter or content site with Array10% OFF

Image zoom widget

Learn how to add the Ghost CMS Image zoom widget for detailed, interactive visuals. Enhance image engagement on your Ghost CMS site with the 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=""></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

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

Site headerSite footer
<link href="" rel="stylesheet">

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

Image zoom demo
Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.