Image Zoom Plugin for Docusaurus 2

This plugin uses the medium-zoom library to allow for zoom in/out on images in your documentation.

Install and Configure

• npm install flexanalytics/plugin-image-zoom
• Add as a plugin to docusaurus.config.js, like this:

  plugins: [
    'plugin-image-zoom'
  ],

• Configure the plugin in docusaurus.config.js, like this:

  themeConfig: {
    imageZoom: {
      // CSS selector to apply the plugin to, defaults to '.markdown img'
      selector: '.markdown img',
      // Optional medium-zoom options
      // see: https://www.npmjs.com/package/medium-zoom#options
      options: {
        margin: 24,
        background: '#BADA55',
        scrollOffset: 0,
        container: '#zoom-container',
        template: '#zoom-template',
      },
    },
  },

Excluding Images from using Zoom

If you want to exclude certain images from using the zoom, then you'll need to apply a special tag to the image in your markdown and then use the imageZoom.selector option in themeConfig to exclude that tag.

For example, in your markdown you could wrap the image in an <em> tag, as such:

click on the _![](/img/portal/new.png)_ button...

Then, exclude images inside an <em> tag, as such:

  themeConfig: {
    imageZoom: {
      selector: '.markdown :not(em) > img',
    },
  },

See plugin-image-zoom in action

Check out the FlexIt Analytics Docs website, built 100% with Docusaurus, to see this plugin in action.

medium-zoom plugin and Using a custom viewport

This plugin uses the medium-zoom plugin, so you can refer to the medium-zoom docs for configuration settings. One common configuration is Using a Custom Viewport. The zoom is by default rendered in the window viewport. You can also render your image in any element of the DOM, or any custom coordinates with the container option.