https://github.com/premieroctet/gatsby-remark-images-zoom

👀 Bring medium-zoom to gatsby-remark-images
https://github.com/premieroctet/gatsby-remark-images-zoom

Last synced: about 2 months ago
JSON representation

👀 Bring medium-zoom to gatsby-remark-images

• Host: GitHub
• URL: https://github.com/premieroctet/gatsby-remark-images-zoom
• Owner: premieroctet
• Created: 2019-05-15T14:40:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-26T08:40:13.000Z (about 4 years ago)
• Last Synced: 2024-07-03T04:45:52.919Z (3 months ago)
• Language: JavaScript
• Homepage: https://www.gatsbyjs.org/packages/gatsby-remark-images-zoom/
• Size: 40 KB
• Stars: 35
• Watchers: 4
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - gatsby-remark-images-zoom - zoom to gatsby-remark-images | premieroctet | 35 | (JavaScript)

README

        






# gatsby-remark-images-zoom 👀

> Bring [medium-zoom](https://github.com/francoischalifour/medium-zoom) to gatsby-remark-images. Try the demo [here](https://www.premieroctet.com/blog/react-amsterdam-2019/)

## Install

```

yarn add gatsby-remark-images-zoom

```

## How to use

👉 This plugin requires [gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images/) and [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark). You have to set the `linkImagesToOriginal` option to `false` in gatsby-remark-images.

```js

// In your gatsby-config.js, under gatsby-transformer-remark plugins

plugins: [

  {

    resolve: `gatsby-transformer-remark`,

    options: {

      plugins: [

        {

          resolve: 'gatsby-remark-images',

          options: {

            linkImagesToOriginal: false,

          },

        },

        `gatsby-remark-images-zoom`,

      ],

    },

  },

],

```

## Configuration

All options from [medium zoom](https://github.com/francoischalifour/medium-zoom) are available:

| Property       | Type                                  | Default  | Description                                      |

| -------------- | ------------------------------------- | -------- | ------------------------------------------------ |

| `margin`       | `number`                              | `0`      | The space outside the zoomed image               |

| `background`   | `string`                              | `"#fff"` | The background of the overlay                    |

| `zIndex`       | `number`                              | `42`     | The z-index 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          |