gatsby-remark-images-medium-zoom

gatsby-remark-images-medium-zoom-plugin 👋

medium-zoom plugin for gatsby with gatsby-remark-images

🗂 Use Case

• gatsby-starter-bee

🚚 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}}✌