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

• Github: @JaeYeopHan
• Twitter: @JbeeLjyhanll

Show your support

Give a ⭐️ if this project helped you!

Written by @Jbee✌