Add div inside Lightbox

[eStasicki]

Hello!

Is it possible to add a sample DIV inside the Portal that the library generates?

I would like to add just one DIV anywhere that will appear everywhere - on each of the elements - the same everywhere.

Thanks!

[igordanchenko]

Hi there!

Can you describe the use case you want to implement? Do you mean an absolutely positioned div that doesn't move with each slide similar to the toolbar?

[igordanchenko]

If you'd like to render a custom lightbox element that doesn't move with each slide, you can use the render.controls render function (this render function was added in v3).

<Lightbox
  render={{
    controls: () => (
      <div style={{ position: "absolute", color: "white", top: 16, left: 16 }}>
        Custom lightbox element
      </div>
    )
  }}
  // ...
/>

But if you'd like your custom element to appear on each slide (and move with each slide), you can use the render.slideFooter render function.

<Lightbox
  render={{
    controls: () => (
      <div style={{ position: "absolute", color: "white", bottom: 16, left: 16 }}>
        Custom slide element
      </div>
    )
  }}
  // ...
/>

I hope this helps.