https://github.com/inovector/docusaurus-plugin-zooming

Image Zoom Plugin for Docusaurus 3
https://github.com/inovector/docusaurus-plugin-zooming

Last synced: about 1 month ago
JSON representation

Image Zoom Plugin for Docusaurus 3

• Host: GitHub
• URL: https://github.com/inovector/docusaurus-plugin-zooming
• Owner: inovector
• License: mit
• Created: 2024-04-17T13:36:55.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-17T15:27:47.000Z (8 months ago)
• Last Synced: 2024-11-01T09:32:52.676Z (about 2 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Docusaurus Plugin Zooming

This plugin uses the [`Zooming`](https://www.npmjs.com/package/zooming) library to allow for zoom in/out on images in your documentation.

## Install

```shell

npm install docusaurus-plugin-zooming

```

## Usage

Update `docusaurus.config.js` to enable the plugin and include its default configuration:

```js

  const config = {

    // ...other config

    

    plugins: [

      'docusaurus-plugin-zooming',

      // ...other plugins

    ],

    

    themeConfig: {

      // ...other themeConfig

      

      zooming: {

        selector: '.markdown img',

        delay: 500,

        background: {

          light: 'rgba(101,108,133,0.8)',

          dark: 'rgba(9,10,17,0.8)'

        },

        options: {

          // See the docs of zooming for all available options: https://github.com/francoischalifour/medium-zoom#usage

        }

      },

    },

  }

  

  module.exports = config;

```

## Configuration

This plugin allows you to configure the following options:

| Option        | Description                                                                                      | Default Value                                                                                         |

|---------------|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|

| `selector`    | (optional) The selector for zoomable image elements.                                          | `.markdown img`                                                                                      |

| `delay`    | (optional) Make imgaes zoomable with delay after entering a page                                          | `500`                                                                                      |

| `background`  | (optional) The background color to use for the zoomed image.                                     | `{ light: 'rgb(255, 255, 255, 0.9)', dark: 'rgb(50, 50, 50, 0.9)' }`                                           |

| `options`      | (optional) The configuration object to pass to `zooming`.                                   | `{}`                                                                                                 |

Example usage in `docusaurus.config.js`:

```js

  themeConfig: {

    zooming: {

      selector: '.markdown :not(em) > img',

      delay: 500,

      background: {

        light: 'rgba(101,108,133,0.8)',

        dark: 'rgba(9,10,17,0.8)'

      },

      options: {

        enableGrab: false,

        // See the docs of zooming for all available options: https://github.com/francoischalifour/medium-zoom#usage

      }

    }

  }

```