How to enable Zoom on custom image slide?

[gab-logicbase]

We have custom image and video slides but we want to integrate the zoom effect only on the custom image slides.

Is there a way to do this?

[igordanchenko]

Are you using a custom slide type or the default image slides with a custom render function? Also, providing a working example (or, at the very least, a code snippet) does wonders in troubleshooting.

[Piogar]

Sorry, hope this one works (I made it public): link

[igordanchenko]

Thank you for sharing the link. I was hoping to see the actual UX you are implementing, not a fork of a made-up draft I posted before.

I see what you are saying re: encapsulation and separation of concerns, but in this case, the lightbox needs to know some details about the slide rendered with a custom render function. Specifically, the "engine" needs to know the dimensions of a slide at maximum zoom level. Why does the "engine" need this? Two reasons:

1. to determine the maximum zoom level and avoid displaying pixelated content
2. to follow the "guide rails" when panning the zoomed-in slide

For instance, the lightbox won't let you scroll to the blank space when you zoom in.

Here is how far to the left the "guide rails" would let you pan the image:

I could potentially forego the latter in case of custom slides or custom render functions, but that would be a UX downgrade, in my opinion.

Solution you proposed is correct and it works, however it has two flaws:

1. to me, approach with resetting whole slide array at each change is counterintuitive - I want to have the same gallery with just a minor change of one element, but I have to reset everything.

I'm sorry to disappoint you, but this is how React state works. If you need to change just one element in an array, you need to make a copy of the entire array.

2. it adds some complexity, e. g. it needs to store index as a state.

It seems like a trivial price to pay, considering that you do not have to keep the "current slide index" as a state in 100% of the cases, as some other libraries require.

Additionally in my example I also added resetting selected variant at each slide change - I had to add it to Lightbox on::view function which makes additional bound between container and concrete type of data. I wanted to avoid that.

I didn't quite understand the UX you were going after with this. When I click the "Next slide" button, the current slide immediately switches to its default variant while the lightbox transitions to the next slide. It looks awkward to me. Is the slide variant supposed to be unique to each slide? Or is it the intended UX? If the variant is supposed to be slide-specific, then I strongly recommend the approach I provided in my previous sandbox.

Last note - I also wanted to add PDF rendering. At zooming, PDF needs to be re-rendered using 3rd party library to keep good quality at bigger scales. Then I think I understand custom renderer is a must.

I would love to see some specific implementation of a PDF slide as I'm not sure PDF would be able to scale properly with the CSS transformations that the Zoom plugin is using.

[Piogar]

This is my first react project (as I wrote - I'm C++ dev, so I'm working on totally different types of software) that is in progress, so I'm experimenting with different approaches that makes putting it to sandbox complicated.

Specifically, the "engine" needs to know the dimensions of a slide at maximum zoom level. Why does the "engine" need this? Two reasons:

Now I see I expressed my intentions a little wrong in terms of custom renderer (point 1 of "functionalities" section in my previous response). I get the point why renderer must deliver some parameter like width and height and I agree both of pixel size control and slide rail functionalities are key for library. My intention was to make renderer dependent on gallery to a minimal level: it should do its magic and return its renderable result plus width and height (so that gallery can control pixel size and slide rail correctly).

When I click the "Next slide" button, the current slide immediately switches to its default variant...

Yes, immediate rerender to "default" variant of index during sliding to next slide is unintended, but I wanted to achieve functionality, that after sliding to next "group of pictures" variant is always reset to 0 (I'm not sure I will need this in my project, but the functionality itself sounds reasonable for some use cases).

I would love to see some specific implementation of a PDF slide as I'm not sure PDF would be able to scale properly with the CSS transformations that the Zoom plugin is using.

I'm using react-pdf. This case would be tricky as react-pdf needs to be given scale parameter to rerender canvas of correct size (to avoid pixelation). I think not 100% of zoom functionality could be used with PDF - slide rails functioality would be used, but the zoom itself would have to be covered by react-pdf with just the help of zoom plugin (delivering zoom factor). I'm not sure it would work and would look good, but certainly starting point is a need to return image + width and height from custom renderer, so that zoom plugin UI can deliver correct values of parameters (e. g. zoom).

Regarding concrete solutions I see two options for rendering PDF that could support zooming (while keeping image quality):

1. [this one I'm not sure it may work correctly] render PDF with the scale equal to max scale configured (so real picture's size is much bigger than "normal"), but return width and height equal to "normal size". Then Lightbox would "think" it is zooming smaller image, but the quality would be good as the picture underneath is much bigger
2. rerender PDF at each time it receives zoom in/out and inform Ligthbox about its new dimensions

Thanks for your help!

[igordanchenko]

My intention was to make renderer dependent on gallery to a minimal level: it should do its magic and return its renderable result plus width and height (so that gallery can control pixel size and slide rail correctly).

Well, the thing is, custom render functions should not return any additional parameters other than the renderable content. The return type of a custom render function is ReactNode, and I'm not planning to change that. The reason for this is that this data is needed in completely different components residing in different parts of the React tree. How do we obtain this data in the case of standard image slides? a) from width / height slide attributes; b) by invoking the setMaxZoomRect callback in image onLoad. My proposal was to extend option b) for custom slides, but you seem to dislike it.

Yes, immediate rerender to "default" variant of index during sliding to next slide is unintended, but I wanted to achieve functionality, that after sliding to next "group of pictures" variant is always reset to 0 (I'm not sure I will need this in my project, but the functionality itself sounds reasonable for some use cases).

Well, it sounds like each slide should have its own "selected" variant, so it should be stored in React state one way or another. The option I proposed in the above sandbox is the most straightforward, in my opinion.

I'm using react-pdf. This case would be tricky as react-pdf needs to be given scale parameter to rerender canvas of correct size (to avoid pixelation). I think not 100% of zoom functionality could be used with PDF - slide rails functioality would be used, but the zoom itself would have to be covered by react-pdf with just the help of zoom plugin (delivering zoom factor). I'm not sure it would work and would look good, but certainly starting point is a need to return image + width and height from custom renderer, so that zoom plugin UI can deliver correct values of parameters (e. g. zoom).

I'm assuming you are using react-pdf, not the @react-pdf/renderer that you hyperlinked above.

I poked around react-pdf and was able to implement PDF slides through standard image slides + custom render function with Zoom features properly working. While it's somewhat hack-ish, it seems to get the job done.

https://codesandbox.io/p/devbox/yet-another-react-lightbox-218-1-fymtlr?file=%2Fsrc%2FApp.tsx

[igordanchenko]

@Piogar I just noticed that CodeSandbox changed the default visibility of forked sandboxes, so they are now private by default. I've fixed the above sandbox and made it public.

[Aleafan]

Hello @igordanchenko! I have similar question to this unfinished thread.

I'm using default image slides with a custom render function. I get slides from server, they can be updated from server.

I can implement your solution, but in my case I have to use state for keeping width/height only for current slide and add this info to slides array received from server. Because otherwise I'll have to merge slides array from server with previous slides expanded with sizes. This solution leads to additional rerenders which is probably not a big deal.

Anyway I had an idea - to make setImageDimensions from ZoomWrapper a Context and execute this function inside every ImageSlide including custom ones. If that's possible any image slides would be supported without explicitly providing width/height. Did I miss some problem with this approach?

[igordanchenko]

I can implement your solution, but in my case I have to use state for keeping width/height only for current slide and add this info to slides array received from server. Because otherwise I'll have to merge slides array from server with previous slides expanded with sizes.

Wouldn't it be beneficial to keep width/height in the slides array anyway in case a user navigates back to the previous slide?

This solution leads to additional rerenders which is probably not a big deal.

I concur. I highly doubt you'll be able to see any noticeable difference, as re-renders are pretty cheap, and judging by your use case, you won't be re-rendering dozens of times per second.

Anyway I had an idea - to make setImageDimensions from ZoomWrapper a Context and execute this function inside every ImageSlide including custom ones. If that's possible any image slides would be supported without explicitly providing width/height. Did I miss some problem with this approach?

There is an existing issue with exporting hooks from plugins due to plugin-internal functions referencing types added through module augmentation. Unfortunately, I do not currently have a solution for this. If you'd like to poke around and see if you can figure out a solution, you can reproduce this issue by adding the following export to src/plugins/zoom/index.ts and running npm run build.

export { useZoom } from "./ZoomController.js";

[Aleafan]

Thanks for your suggestion!

I implemented this by keeping separate local state with src and sizes of already loaded images. This state is "merged" with slides array from server.

There is an existing issue with exporting hooks from plugins due to plugin-internal functions referencing types added through module augmentation

I reproduced this issue, if I can figure out some solution - I'll let you know.

[igordanchenko]

There is an existing issue with exporting hooks from plugins due to plugin-internal functions referencing types added through module augmentation

It looks like this issue can be solved by exporting ZoomRef type from yet-another-react-lightbox/plugins/zoom rather than adding it to the library root via module augmentation. But that would be a breaking change, so I'll defer doing this till the next major.

[ma10as]

Hey @igordanchenko

First for all it's a grate library you have made👍🏻

I have a problem with Zoom on my custom slide, the zoom in and zoom out buttons is disabled.

I have creade a custom slide, because i need to add a overlay with som information on top off the image.

Images array look like this

{
"__typename": "Image"
"_id": "quraJT4c7Cooy83S7"
"format": "jpg"
"heigh": 4032
"location": "Sleipnersvej 15, 4100 Ringsted, Danmark"
"publicId": "ringstedlift/h5sjxxvhojuknkxazge3"
"takenAt": "2024-07-29T09:44:11.787Z"
"visible": null
"width": 1860
},{
"__typename": "Image"
"​_id": "quraJT4c7Cooy83S7"
​"format": "jpg"
"​height": 4032
"​location": "Sleipnersvej 15, 4100 Ringsted, Danmark"
​"publicId": "ringstedlift/h5sjxxvhojuknkxazge3"
"​takenAt": "2024-07-29T09:44:11.787Z"
"visible": null
"width": 1860
}

Code

const OrderLineImageRow = ({
  images,
  customerName,
  orderNumber,
  unitNumber,
  onChange,
  editable = true,
}) => {
  const [open, setOpen] = useState(false);
  const [showIndex, setShowIndex] = useState(0);


  const handleOpen = ({ i }) => {
    setOpen(true);
    setShowIndex(i);
  };

  const Overlay = ({ slide }) => (
    <div>
      <p>
        Unit: {unitNumber} - {moment(slide.takenAt).format('DD/MM YYYY')} kl.{' '}
        {moment(slide.takenAt).format('HH:mm:ss')}
      </p>
      <p>Adresse: {slide.location}</p>
      {orderNumber && (
        <p>
          Ordrenr.: {orderNumber} Kunde: {customerName}
        </p>
      )}
    </div>
  );

  const ImageWithOverlay = ({ slide, offset, rect, zoom, maxZoom }) => {
    console.log({ zoom });
    console.log({ maxZoom });
    return (
      <LightboxImageContainer>
        {slide.location && <Overlay slide={slide} />}
        <img
          src={`https://res.cloudinary.com/dxwfoqglb/image/upload/${slide.publicId}.${slide.format}`}
          alt=""
          style={{
            maxWidth: `min(${slide.width}px, 100%)`,
            maxHeight: `min(${slide.height}px, 100%)`,
          }}
        />
      </LightboxImageContainer>
    );
  };

  return (
    <>
      <OrderLineImageGallery>
        {images.map((image, i) => {
          if (image.visible === false && editable === false) return null;
          return (
            <OrderLineImageGalleryColumn key={image._id}>
              <ImageContainer>
                {image.location && <Overlay slide={image} />}

                <img
                  src={`https://res.cloudinary.com/dxwfoqglb/image/upload/c_scale,w_380/${image.publicId}.${image.format}`}
                  onClick={() => handleOpen({ i })}
                />
              </ImageContainer>
              {editable && onChange && (
                <input
                  type="checkbox"
                  checked={image.visible === false ? image.visible : true}
                  onChange={(e) => onChange(image._id, e.currentTarget.checked)}
                />
              )}
            </OrderLineImageGalleryColumn>
          );
        })}
        <Lightbox
          open={open}
          close={() => setOpen(false)}
          index={showIndex}
          plugins={[Zoom]}
          render={{
            slide: ({ slide, offset, rect, zoom, maxZoom }) => (
              <ImageWithOverlay {...{ slide, offset, rect, zoom, maxZoom }} />
            ),
          }}
          slides={images}
        />
      </OrderLineImageGallery>
    </>
  );
};

What am I missing?

[igordanchenko]

Hi there!

You are using image slides + custom render function, a Zoom-compatible use case. However, some parts of the program do not recognize your slides as valid image slides because they are missing the src prop.

Here is a simple fix for your case:

slides={slides.map((slide) => ({ ...slide, src: slide.publicId }))}

[ma10as]

That solved the problem, thanks a lot for the help👍🏻

[ma10as]

@igordanchenko I'm not able to use, the click-and-drag function when I zoom?

[igordanchenko]

You probably need to set draggable={false} on your image.

[DeFuex]

i seem to have the same problem as @ma10as where my zoom buttons are deactivated. following is sample code from my application. Help would be really appreciated, the solution here offered does not seem to work for me with custom render function and slides property changes suggested and used.

im using Vite, Typescript, React, Mantine Ui (Image component) and the latest version of yet-another-react-lightbox lib (3.21.4)

....
import Lightbox, { Slide, SlideImage } from "yet-another-react-lightbox";
import {
  Download,
  Share,
  Fullscreen,
  Zoom,
  Thumbnails,
  Captions,
  Counter,
} from "yet-another-react-lightbox/plugins";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";
import "yet-another-react-lightbox/plugins/counter.css";
import "yet-another-react-lightbox/plugins/captions.css";
...
....

export type SlideDataType = SlideImage & {
  type: "image" | string;
  src: string;
  thumbnail: string;
  audioSrc?: string;
  comment: string | CommentsType | undefined;
  comments: CommentsType[] | undefined;
  media: MediaCardType;
  onAddComment: () => void;
  onRotateMedia: () => void;
  showCloseButton: boolean;
  share: { url: string };
  downloadUrl: string;
  title: string;
  description: string;
  vignette: false;
};

...
  const renderSlide = (slide: Slide): ReactNode => {
    if (slide.type === "audio") {
      return (
        <div style={styles.slideAudioWrapper}>
          <div style={styles.slideAudio}>
            {audioPlayer(hostURL, slide.audioSrc!)}
          </div>
        </div>
      );
    } else if (slide.type === "other" || slide.type === "media") {
      return (
          <Image
              src={slide.src}
              style={{
                   width: slide.width,
                   height: slide.height,
                   maxWidth: "100%",
                   maxHeight: "100%",
                   flex: 1,
               }}
        />
        )
      );
    }
...
  return (
    <div>
      <Lightbox
        slides={slides.map((slide) => ({
          ...slide,
          src: slide.src,
          thumbnail: slide.thumbnail,
          type: slide.type,
        }))}
        open={isOpen}
        index={currentIndex}
        counter={counterStyles}
        close={() => dispatch(closeLightbox())}
        render={{
          thumbnail: ({ slide }) => renderThumbnail(slide),
          slide: ({ slide, offset, rect, zoom, maxZoom }) => renderSlide(slide),
        }}
        plugins={plugins}
        zoom={{
          scrollToZoom: true,
          maxZoomPixelRatio: 2,
          zoomInMultiplier: 1.5,
        }}
        thumbnails={{
          showToggle: true,
          position: "bottom",
        }}
        captions={{
          showToggle: true,
          descriptionTextAlign: "center",
          descriptionMaxLines: 2,
        }}
        on={{ view: ({ index }) => handleSlideChange(index) }}
      />
    </div>
  );
};

i did not post all the code, but all necessary parts that should be of use.

[DeFuex]

Thanks, that really helped, I created an additional subtype property in my SlidesDataType and use "image" | "video" now for the main slide.type. A bit of refactoring, but zoom works now as well, thanks :)

Also thank you for making this library. It's awesome.

[DeFuex]

One more thing, even if im setting draggable={false} it does not seem to work to click and move around the picture as suggested above as well

[igordanchenko]

Do you mind sharing a minimal repro?

[DeFuex]

While i was creating the minimal repo i realised that on certain higher resolution images it seems to work. I also forgot to set a draggable={false} somewhere additionally. Seems to be fixed for now, rubber duck minimal repo was helpful :)

[igordanchenko]

Works like a charm every single time 👍