
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 gatsby-transformer-remark
. You have to set the linkImagesToOriginal
option to false in gatsby-remark-images.
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
linkImagesToOriginal: false // point!
}
},
{
resolve: `gatsby-remark-images-medium-zoom`, // point!
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 |
Author
👤 JaeYeopHan (Jbee)
- Github: @JaeYeopHan
- Twitter: @JbeeLjyhanll
Show your support
Give a ⭐️ if this project helped you!
Written by @Jbee✌