Inline and full-window view

[ncovercash]

I want to start off by saying I've just found your library, and I'm absolutely loving it! It seems to be leagues above most others I've seen, and fills the perfect spot between lots of easy customization and lots of features!

Is your feature request related to a problem? Please describe.

Not related to a problem

Describe the solution you'd like

I'd like to be able to use the Inline plugin to render the lightbox inside the page, however, I'd also like to be able to use it in it's traditional view (where it occupies the entire viewport). Ideally, the full viewport mode would be opened when an image is clicked (as opposed to the external button in most examples) and closed just like the regular one (click outside of it/button), but just having a variant of Fullscreen that doesn't actually fullscreen the window, but still performs the DOM changes, would be great too).

Describe alternatives you've considered

I've considered attempting to use two instances of the component, however, I can't seem to control them both in a way that will synchronize their state.

Additional context

An example would be Etsy, where there is the "inline" display (with thumbnails/etc), however, clicking brings up the full-size version.

Inline/in the page. When clicked, the whole viewport is filled with the lightbox

[igordanchenko]

Hi there! Thank you for bringing up this interesting use case.

I'd use 2 separate Lightbox instances in this case. Does this look like the experience you want to implement?

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

There is an option to use the same lightbox, but I'm pretty sure there will be visible page content layout shift when the lightbox opens/closes.

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

[ncovercash]

That's great, thank you so much! I dug through the docs, no idea how I missed the index parameter (I only saw the callback)