premieroctet/gatsby-remark-images-zoom

👀 Bring medium-zoom to gatsby-remark-images

gatsby-remark-images-zoom's Issues

Not working before refresh

Hello,
if I access my case studies (markdown) via the page generator by slug, the plugin won't work initially, I need to manually refresh the markdown page for it to work properly, any ideas?

Thanks in advance.

Missing } in the README

The How to Use in the README.md is missing a } in the second to last line

plugins: [
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          linkImagesToOriginal: false,
        },
      },
      `gatsby-remark-images-zoom`,
    ],
  }
} # <-----------------------------------------
];

Not working

My issue is very similar to #2;

When I compare to the demo site:

• The <img> tag on my site isn't nested inside the responsive background image <span>
• The .medium-zoom-image class is missing from the <img> on my site

The main difference seems to be that nuking node_modules did not help.

This is my configuration: https://github.com/barbalex/vermehrung/blob/c76d323180b13db0297c0b05bfb83bd9d569c9f3/gatsby-config.js#L90

Here is the md file with the image: https://github.com/barbalex/vermehrung/blob/c76d323180b13db0297c0b05bfb83bd9d569c9f3/src/technischeDoku/struktur.md

In my case this happens in dev and in production.

Will Not Unzoom

This looks like a great start to a plugin I'm in need of. Awesome. However, I can't get the images to unzoom.

I'm using https://github.com/pretzelhands/gatsby-starter-semantic-ui as the starter with this configuration.

  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-less',
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 300,
              linkImagesToOriginal: false,
            },
          },
          `gatsby-remark-images-zoom`,
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'images',
        path: `${__dirname}/src/data/images/`,
      },
    },

I get the unzoom cursor, but it doesn't do anything.

Thoughts?

Nothing happens when image is clicked (possible issue with <img> tag?)

I followed the instructions and installed the plugin, added it to the gatsby-config.js file like so:

//...
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 1000,
          linkImagesToOriginal: false
        }
      },
      'gatsby-remark-images-zoom',
//...

however clicking on it does nothing.

It would help a lot if the their was a demo site with code available, however comparing against the generated HTML of the demo linked in the readme, I noticed a couple of (likely key) differences compared to my site's code:

On the left is my site and on the right is the demo site. Note that

• The <img> tag on my site isn't nested inside the responsive background image <span>
• The .medium-zoom-image class is missing from the <img> on my site

Not sure why the tag isn't being nested properly, or if this is some sort of conflicting dependency issue. Any idea on what it might be, or what I could try to resolve it?

Thank you!

Not an issue - just wanted to take a moment and say thank you! 🙏 🎆 🎆 🎆

Can this work outside of markdown?

This looks nice, but can it work with gatsby-image processed images in a regular Gatsby page, and not just images in a markdown file? Essentially, a universal image zoom function of all images on a site, whether they be in a markdown file or in a page.

thanks!