How to customize yet-another-react-lightbox to show a custom sidebar below the carousel and thumbnail?

204 views Asked by At

I am using the caption and thumbnail plugin, I want to show a poll question with answers where the user can vote (API request), the problem I am facing is I want to show it below the thumbnail and I want it to be fixed through all the slides or at least shown in each slide. I figured out I need to create a custom plugin and a custom slide, correct me if I am wrong. Is it doable with these specific requirements? and if yes can you help me with how to do it? Using nextjs and yet-another-react-lightbox Here's my current lightbox:

import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/plugins/thumbnails.css";
import "yet-another-react-lightbox/plugins/captions.css";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Lightbox from "yet-another-react-lightbox";
import { ItemDetail } from "@/types/photoNews";

const AlbumModal = ({
  item,
  open,
  setOpen,
}: {
  albumItem: ItemDetail;
  open: boolean;
  setOpen: (value: React.SetStateAction<boolean>) => void;
})=>
{
return(
<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides}
  carousel={{
    finite: true,
    imageFit: "contain",
  }}
  plugins={[Thumbnails, Captions,]}
  captions={{ descriptionMaxLines: 1, descriptionTextAlign: "center" }}
  styles = {{
    container: {
      backgroundColor: "rgba(0, 0, 0, .95)",
    },
    captionsDescriptionContainer: {
      paddingBottom: "5%",
    },
  }}
/>)}

The item object has the polls and answers.

0

There are 0 answers