medium-zoom plugin for gatsby with
gatsby-remark-images
$ 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
π This plugin requires gatsby-remark-images and either gatsby-transformer-remark or gatsby-plugin-mdx.
The linkImagesToOriginal option needs to be set to false.
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
linkImagesToOriginal: false // Important!
}
},
{
resolve: `gatsby-remark-images-medium-zoom`, // Important!
options: {
//...
}
}
]
}
}
]// In your gatsby-config.js
plugins: [
{
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: {}
}
]
}
}
]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 |
π€ JaeYeopHan (Jbee)
- Github: @JaeYeopHan
- Twitter: @JbeeLjyhanll
Give a βοΈ if this project helped you!
Written by @Jbeeβ
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent