How would I add an overlay div on top of a slide image?

[bojandurmic]

Hi there, thanks for creating this awesome library!

I'm exploring the documentation and I'm not sure how to approach this issue. I am building an application where users can be tagged, and I want to display their names on top of an image, similar to how social networks like Instagram display tags on images.

To do that, I'd need to have a div that will be absolutely positioned and sit on top of the image. Then, I can do my logic and display tags on appropriate position.

My initial strategy was to use a custom slide. That won't work for me, as I'm also interested in using the Zoom plugin. What would be the appropriate strategy here? Creating a custom plugin myself?

Any help would be greatly appreciated. Thanks!

[igordanchenko]

Hi there!

Are you trying to position the tags relative to the image (e.g. bottom left corner of the image)? or relative to the lightbox viewport?

The latter is pretty trivial to implement with render.slideFooter:

render={{
  slideFooter: ({ slide }) => (
    <div style={{ position: "absolute", bottom: 0, left: 0, padding: 10, color: "red" }}>Image tags</div>
  ),
}}

However, adding an overlay on top of an image that matches its dimensions isn't trivial in the current version (especially with Zoom plugin). You could probably use the following approach if you are not using responsive images (images with srcSet).

function ImageWithOverlay({ slide, offset, rect }: RenderSlideProps<SlideImage>) {
  const [loaded, setLoaded] = React.useState(false);

  return (
    <span style={{ position: "relative" }}>
      <ImageSlide
        slide={slide}
        offset={offset}
        rect={rect}
        style={{ display: "block" }}
        onLoad={() => setLoaded(true)}
      />

      {loaded && <div style={{ position: "absolute", bottom: 0, left: 0, color: "red" }}>Image tag</div>}
    </span>
  );
}

render={{
  slide: ({ slide, offset, rect }) =>
    isImageSlide(slide) ? <ImageWithOverlay {...{ slide, offset, rect }} /> : undefined,
}}

Please let me know if the above addresses your case.

[igordanchenko]

Sorry for bothering you, but may I ask one more question, @igordanchenko : how easy it would be to implement a pull up to close functionality? I see the library has pull down to close, but a lot of lightboxes, especially for mobile apps, support swipe in any vertical direction to close.

If you reckon it's simple enough and you'd be open for a PR, I can try to contribute that.

I think, It should be easy enough to implement. Please feel free to open a PR of file a separate feature request ticket and I'll take a look.

[bojandurmic]

I am using this on an Ionic app, which will only be run on smaller devices (phones).

Running this in the web, with 1920x1080 resolution doesn't cause any problems for me, but my images also aren't huge. Can you send some image that doesn't work well for you, so I can test?

I'll try to open a PR sometime this week.

[igordanchenko]

I am using this on an Ionic app, which will only be run on smaller devices (phones).

I see. Well, I just wanted to alert you of potential undesired side effects that I noticed, but it's great if it's working well in your case.

Can you send some image that doesn't work well for you, so I can test?

Take a look at the following sandbox - https://codesandbox.io/p/devbox/yet-another-react-lightbox-223-hz8gpj

I do not have a better solution at the moment, but I will let you know if anything comes to mind.

[igordanchenko]

@bojandurmic, here is an alternative implementation that I believe addresses the issue I was seeing in my tests.

import * as React from "react";
import {
  Lightbox,
  RenderSlideProps,
  ImageSlide,
  SlideImage,
  isImageSlide,
} from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";

function ImageWithOverlay({ slide, offset, rect }: RenderSlideProps<SlideImage>) {
  const [loaded, setLoaded] = React.useState(false);

  return (
    <div
      style={{
        position: "relative",
        ...(slide.width && slide.height
          ? {
              maxWidth: `min(${slide.width}px, 100%)`,
              maxHeight: `min(${slide.height}px, 100%)`,
              aspectRatio: `${slide.width} / ${slide.height}`,
            }
          : null),
      }}
    >
      <ImageSlide
        slide={slide}
        offset={offset}
        rect={rect}
        style={{
          display: "block",
          ...(slide.width && slide.height
            ? {
                width: "100%",
                height: "auto",
                maxWidth: undefined,
                maxHeight: undefined,
              }
            : null),
        }}
        onLoad={() => setLoaded(true)}
      />

      {loaded && (
        <div
          style={{
            position: "absolute",
            bottom: 0,
            left: 0,
            color: "red",
          }}
        >
          Image tag
        </div>
      )}
    </div>
  );
}

// ...

<Lightbox
  slides={slides}
  open={open}
  close={() => setOpen(false)}
  plugins={[Zoom]}
  render={{
    slide: ({ slide, offset, rect }) =>
      isImageSlide(slide) ? (
        <ImageWithOverlay {...{ slide, offset, rect }} />
      ) : undefined,
  }}
/>

Live demo - https://codesandbox.io/p/devbox/yet-another-react-lightbox-223-1-p35pf6?file=%2Fsrc%2FApp.tsx