Position toolbar below the inline carousel

[stevenfeltner]

Hi,

Can someone help me with getting the toolbar to be below the carousel? I've tried styles and also a module scoped CSS. Basically looking to get the toolbar to not sit on top of the image/s. I've tried changing the container to use relative and flex-direction: column without much success. Thank you in advance!

[igordanchenko]

Hi!

Currently the toolbar is rendered relative to the carousel. If you want to position it at the bottom of the carousel you can tweak its position with the following css.

export default function App() {
    return (
        <Lightbox
            slides={slides}
            plugins={[Inline, Download, Fullscreen, Slideshow]}
            inline={{ style: { width: 400, height: 300, margin: "0 auto" } }}
            carousel={{ padding: 0, spacing: 0, imageFit: "cover" }}
        />
    );
}

.yarl__toolbar {
    top: unset;
    bottom: 0;
}

However, positioning the toolbar below the carousel is not supported out of the box. You'd need to add an extra <div> wrapper to achieve the desired layout.

import { Lightbox, MODULE_CONTROLLER, createModule, ComponentProps, PluginProps } from "yet-another-react-lightbox";

function CarouselWrapper({ children }: ComponentProps) {
    return <div className="yarl__carousel_wrapper">{children}</div>;
}

function CarouselWrapperPlugin({ addParent }: PluginProps) {
    addParent(MODULE_CONTROLLER, createModule("carousel-wrapper", CarouselWrapper));
}

export default function App() {
    return (
        <Lightbox
            slides={slides}
            plugins={[Inline, Download, Fullscreen, Slideshow, CarouselWrapperPlugin]}
            inline={{ style: { width: 400, height: 300, margin: "0 auto" } }}
            carousel={{ padding: 0, spacing: 0, imageFit: "cover" }}
        />
    );
}

.yarl__root {
    background-color: black;
    overflow: hidden;
}

.yarl__container {
    overflow: visible;
}

.yarl__carousel_wrapper {
    inset: 0;
    position: absolute;
    margin-bottom: 64px;
}

.yarl__toolbar {
    top: unset;
    bottom: -64px;
}

Is this the layout you have in mind? Please feel free to share a screenshot of your end result if you'd like to make a case for it to be supported by the library.

[stevenfeltner]

Yes, the div wrapper is what I was looking for, this is extremely helpful thank you!

The only issue I have now is it seems to not work with inline plugin. I'm using two lightboxes with the first one using the inline plugin and when clicking on a slide to open the other lightbox not using inline.

<Lightbox
  className={styles.toolbar}
  index={index}
  slides={slides}
  plugins={[
    ({ remove }) => remove("navigation"),
    Inline,
    NavNext,
    NavPrev,
    Gallery,
    Dislike,
    Like,
    CarouselWrapperPlugin,
  ]}
  on={{ view: updateIndex, click: toggleOpen(true) }}
  carousel={{ finite: true, padding: 0, spacing: 0 }}
  inline={{
    style: {
      width: "100%",
      maxHeight: "516px",
      aspectRatio: "1 / 1",
      margin: "0 auto",
      cursor: "zoom-in",
    },
  }}
/>
<Lightbox
  className={styles.toolbar}
  open={open}
  carousel={{ finite: true, padding: 0, spacing: 0 }}
  plugins={[
    ({ remove }) => remove("navigation"),
    Zoom,
    NavNext,
    NavPrev,
    Gallery,
    Dislike,
    Like,
    CarouselWrapperPlugin,
  ]}
  close={toggleOpen(false)}
  index={index}
  slides={slides}
  on={{ view: updateIndex }}
  controller={{ closeOnPullDown: true, closeOnBackdropClick: true }}
/>

Here is what I have when open is true with the second lightbox, which I would like on the inline lightbox as well:

Let me know if you have any ideas why this wouldn't work with the inline.

[igordanchenko]

Must have something to do with your implementation. The screenshot I captured in my previous post is showing a lightbox with inline plugin. Please consider sharing a demo on codesandbox and I'll be happy to take a look.

[igordanchenko]

Hi, I'm just checking in to see if you were able to resolve your issue or if you need further assistance? I put together the following demo that I think is what you are trying to build. Please let me know.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-165-q84d3h?file=%2Fsrc%2FApp.tsx