Nautical Pirate Moustache

    gatsby-remark-images-medium-zoom

    1.7.0 • Public • Published

    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

    Install

    npm i gatsby-remark-images-medium-zoom

    DownloadsWeekly Downloads

    532

    Version

    1.7.0

    License

    MIT

    Unpacked Size

    257 kB

    Total Files

    8

    Last publish

    Collaborators

    • jbee