Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

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

npm version

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 either gatsby-transformer-remark or gatsby-plugin-mdx.

The linkImagesToOriginal option needs to be set to false.

Use with gatsby-transformer-remark

// 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: {
            //...
          }
        }
      ]
    }
  }
]

Use with gatsby-plugin-mdx

// 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: {}
        }
      ]
    }
  }
]

⚙ 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)

Show your support

Give a ⭐️ if this project helped you!

Written by @Jbee

© 2024 Gatsby, Inc.