
gatsby-remark-images-medium-zoom-plugin 👋
medium-zoom plugin for gatsby with
gatsby-remark-images
🗂 Use Case
🚚 Install
$ npm install --save gatsby-remark-images-medium-zoom
$ npm install --save gatsby-remark-images gatsby-transformer-remark
# or
$ yarn add gatsby-remark-images-medium-zoom
$ yarn add gatsby-remark-images gatsby-transformer-remark
🚀 How to use
👉 This plugin requires gatsby-remark-images
and either gatsby-transformer-remark
or gatsby-plugin-mdx
.
The linkImagesToOriginal
option needs to be set to false
.
gatsby-transformer-remark
Use with // In your gatsby-config.jsplugins: resolve: `gatsby-transformer-remark` options: plugins: resolve: `gatsby-remark-images` options: maxWidth: 590 linkImagesToOriginal: false // Important! resolve: `gatsby-remark-images-medium-zoom` // Important! options: //...
gatsby-plugin-mdx
Use with // In your gatsby-config.jsplugins: resolve: `gatsby-plugin-mdx` options: // a workaround to solve mdx-remark plugin compat issue // https://github.com/gatsbyjs/gatsby/issues/15486 plugins: `gatsby-remark-images` `gatsby-remark-images-medium-zoom` // Important! gatsbyRemarkPlugins: resolve: `gatsby-remark-images` options: maxWidth: 590 linkImagesToOriginal: false // Important! resolve: `gatsby-remark-images-medium-zoom` // Important! options: {}
⚙ Options
https://github.com/francoischalifour/medium-zoom#options
Property | Type | Default | Description |
---|---|---|---|
margin |
number |
0 |
The space outside the zoomed image |
background |
string |
"#fff" |
The background of the overlay |
scrollOffset |
number |
40 |
The number of pixels to scroll to close the zoom |
container |
string | HTMLElement | object |
null |
The viewport to render the zoom in |
template |
string | HTMLTemplateElement |
null |
The template element to display on zoom |
zIndex |
number |
999 |
The number of z-index of overlay element and image element |
In addition, this plugin has its own options:
Property | Type | Default | Description |
---|---|---|---|
excludedSelector |
string |
null |
The selector of excluded images to zoom in |
includedSelector |
string |
null |
The selector of included images to zoom in on in addition to the ones parsed by gatsby-remark-images |
Author
👤 JaeYeopHan (Jbee)
- Github: @JaeYeopHan
- Twitter: @JbeeLjyhanll
Show your support
Give a ⭐️ if this project helped you!
Written by @Jbee✌