👀 gatsby-remark-images-zoom

Bring medium-zoom to gatsby-remark-images

Note: this plugin requires gatsby-remark-images and gatsby-transformer-remark

Install

yarn add gatsby-remark-images-zoom

How to use

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

plugins: [
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      `gatsby-remark-images`,
      `gatsby-remark-images-zoom`,
    ],
  }
];

Configuration

All options from 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 |