Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom
Image Zoom Plugin for Docusaurus 2
https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom
Last synced: 13 days ago
JSON representation
Image Zoom Plugin for Docusaurus 2
- Host: GitHub
- URL: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom
- Owner: gabrielcsapo
- License: mit
- Created: 2021-09-07T20:43:25.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-01T18:43:54.000Z (9 months ago)
- Last Synced: 2024-10-19T18:02:45.031Z (20 days ago)
- Language: JavaScript
- Homepage: https://gabrielcsapo.github.io/docusaurus-plugin-image-zoom/
- Size: 3.58 MB
- Stars: 69
- Watchers: 3
- Forks: 15
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ccamel - gabrielcsapo/docusaurus-plugin-image-zoom - Image Zoom Plugin for Docusaurus 2 (JavaScript)
README
# docusaurus-plugin-image-zoom
> Docusaurus plugin to utilize [`medium-zoom`](https://www.npmjs.com/package/medium-zoom) in your projects easily!
## Install
```shell
npm install docusaurus-plugin-image-zoom
```
## Usage
Update `docusaurus.config.js` to enable the plugin and include its default configuration:
```js
const config = {
// ...other config
plugins: [
'docusaurus-plugin-image-zoom', // can also just be 'image-zoom'
// ...other plugins
],
themeConfig: {
// ...other themeConfig
zoom: {
selector: '.markdown > img',
background: {
light: 'rgb(255, 255, 255)',
dark: 'rgb(50, 50, 50)'
},
config: {
// options you can specify via 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 to use for the images to zoom. | `.markdown img` |
| `background` | (optional) The background color to use for the zoomed image. | `{ light: 'rgb(255, 255, 255)', dark: 'rgb(50, 50, 50)' }` |
| `config` | (optional) The configuration object to pass to `medium-zoom`. | `{}` |
Example usage in `docusaurus.config.js`:
```js
themeConfig: {
zoom: {
selector: '.markdown :not(em) > img',
background: {
light: 'rgb(255, 255, 255)',
dark: 'rgb(50, 50, 50)'
},
config: {
// options you can specify via https://github.com/francoischalifour/medium-zoom#usage
}
}
},
```