Why are the zoom buttons not working?

[zehawki]

I see in my small local setup and also in a recently created snippet here https://codesandbox.io/s/yet-another-react-lightbox-sandbox-forked-u8prpf?file=/src/App.js

[igordanchenko]

Zoom plugin requires image width/height attributes in order to work. I'll make a note of it in the documentation.

UPDATE: this is no longer a requirement in v2.x

[masterbater]

Zoom plugin requires image width/height attributes in order to work. I'll make a note of it in the documentation.

Why zoom doesnt work if the dimension is not exactly width: 3840, height: 2560, . I tried changing that number, then zoom icon got disabled

[igordanchenko]

@masterbater

Why zoom doesnt work if the dimension is not exactly width: 3840, height: 2560, . I tried changing that number, then zoom icon got disabled

This is obviously not the case since even the official demo uses images with different dimensions.

https://codesandbox.io/s/yet-another-react-lightbox-examples-9qvmif?file=/src/data/photos.js&initialpath=/plugins/zoom

Zoom plugin requires image width/height attributes in order to work.

This is no longer a requirement in 2.x btw.

[masterbater]

@masterbater

Why zoom doesnt work if the dimension is not exactly width: 3840, height: 2560, . I tried changing that number, then zoom icon got disabled

This is obviously not the case since even the official demo uses images with different dimensions.

https://codesandbox.io/s/yet-another-react-lightbox-examples-9qvmif?file=/src/data/photos.js&initialpath=/plugins/zoom

Zoom plugin requires image width/height attributes in order to work.

This is no longer a requirement in 2.x btw.

Can you help me why does the zoom wont work in this case?

import * as React from "react";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import Zoom from 'yet-another-react-lightbox/plugins/zoom'
const Playground = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open Lightbox Gwapo
      </button>

      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={[
          {
            src: "https://cdn-icons-png.flaticon.com/512/2995/2995462.png",
            alt: "image 1",
          
          },
        
        ]}
        plugins={[Zoom]}
      />
    </>
  );
};
export default Playground;

[igordanchenko]

Your image is 512x512 pixels, and the "Zoom In" button is disabled because the image is already at its maximum zoom level. Here are couple things you can try to "enable" zoom buttons in this case:

1. Resize the browser window to make it smaller than 512x512.
2. Use larger images.
3. Increase the max zoom pixel ratio: zoom={{ maxZoomPixelRatio: 10 }}

[masterbater]

zoom={{ maxZoomPixelRatio: 10 }}

This works thanks a lot