Package Exports

plugin-image-zoom
plugin-image-zoom/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (plugin-image-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

plugin-image-zoom