Skip to content
🤳medium-zoom plugin for gatsby! Raise UX of user who visit your gatsby site with this plugin
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode env: Add vscode config Jun 24, 2019
.gitignore Initial commit Jun 18, 2019
.prettierrc env: Add prettier config Jun 24, 2019
LICENSE Initial commit Jun 18, 2019 docs: Update Jul 1, 2019
gatsby-browser.js fix: Fix PerformanceObserver logic for unsupported browser Jun 25, 2019
index.js Initial commit Jun 18, 2019
logo.png docs: Add logo Jun 18, 2019
package-lock.json Initial commit Jun 18, 2019
package.json release 1.2.1 version Jun 25, 2019

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

Twitter: JbeeLjyhanll

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

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


👤 JaeYeopHan (Jbee)

Show your support

Give a ⭐️ if this project helped you!

Written by @Jbee

You can’t perform that action at this time.