[Feat]: Embla lightbox

[openscript]

Hi @davidjerleke

Unfortunately it's hard to find such well documented and nicely programmed React components (written in TypeScript) like embla-carousel. Sometimes I have the need to combine embla-carousel with a lightbox. For common understanding: Here is one of the first lightbox: https://lokeshdhakar.com/projects/lightbox2/

The closest existing React component which fulfills my needs is https://github.com/tim-soft/react-spring-lightbox, but it's quite hard to integrate with embla-carousel. The "problem" is, that react-spring-lightbox renders the thumbnails (or embla slides) by itself. I see a market opportunity (if opensource community can be called a market 😃) to have a nice, well-integrated lightbox React component.

In my opinion, the "to-be created" lightbox component should integrate embla-carousel, when it's in lightbox mode, but embla-carousel should be independent from embla-lightbox. So the entrypoint into the lightbox can be from pictures and images (for example in a grid) as well as from slides inside an embla-carousel.

Contrary to the react-spring-lightbox, where the component renders the thumbnails by itself, I imagine that the embla-lightbox needs to be wrapper which manages a context with the registered images/slides and takes care of the lightbox mode when needed.

I would be happy to work on something like that, maybe inside a embla-components organization here on Github or another context.

I'm looking forward to hearing any opinions about this 🧗‍♂️

Robin

[davidjerleke]

Hi Robin (@openscript),

I think this is a good idea and it sounds like a fun project to work on 🙂. Version 6 of Embla introduced the plugin system which allows for extending the carousel beyond its core features. Initially, I thought that the lightbox component could be built as a plugin.

But when reading your description, it seems like this component will only be available for React users. Is that correct? If that's the case, I'm leaning more towards creating a separate repository for the lightbox component and not designing it as an Embla plugin. This is because all Embla plugins should be library agnostic and work with VanillaJS, ReactJS or any other framework/library.

I'd be happy to help out with my deep understanding of the Embla core and suggest solutions to different challenges that may arise during the development of this lightbox component. As you've probably noticed already, the embla.internalEngine() method is very powerful and pretty much exposes the whole internal Embla engine. This allows for extending and tweaking the carousel behavior beyond our dreams 😉.

Best,
David

[davidjerleke]

@openscript have you had the chance to read my response yet?

Best,
David

[openscript]

Hi David @davidjerleke

Sorry, for not answering earlier. I've read your great response, but somehow I got distracted and then I forgot it eventually.

First I thought a React component would do the job, but I think it wouldn't hurt to make the lightbox library agnostic as well. I think Embla and the lightbox shouldn't be coupled too strongly. The lightbox can be used without Embla, but if a picture is opened in the light box you won't have the possibility to swipe to the next picture in the gallery, whereas combined with Embla this feature along with other Embly features are provided.

1. What do you think? How should we continue?
2. Is it okay for you, to use the name Embla again for it? e. g. embla-lightbox
3. Where should this repo be placed? Inside a separate organization?

I'm looking forward to working on this.

Robin

[davidjerleke]

@openscript I'm sorry for forgetting about this 🙈.

1. What do you think? How should we continue?

About this:

First I thought a React component would do the job, but I think it wouldn't hurt to make the lightbox library agnostic as well. I think Embla and the lightbox shouldn't be coupled too strongly. The lightbox can be used without Embla, but if a picture is opened in the light box you won't have the possibility to swipe to the next picture in the gallery, whereas combined with Embla this feature along with other Embly features are provided.

I think that if the lightbox isn't supposed to be tightly coupled with Embla, it shouldn't be an Embla plugin. Official Embla plugins require you to use the core Embla package. Because of this, I think it should be a separate repository.

---

2. Is it okay for you, to use the name Embla again for it? e. g. embla-lightbox

Sure. Official Embla plugins have to be prefixed with embla-carousel-<plugin_name> (example: embla-carousel-fade) so embla-<name_of_the_package> (example. embla-lightbox) is totally fine.

---

3. Where should this repo be placed? Inside a separate organization?

You can create a repository under your GitHub user if you want. As I mentioned in my previous comment, in this period in my life, I don't have the time needed to take lead on this project, but:

I'd be happy to help out with my deep understanding of the Embla core and suggest solutions to different challenges that may arise during the development of this lightbox component. As you've probably noticed already, the embla.internalEngine() method is very powerful and pretty much exposes the whole internal Embla engine. This allows for extending and tweaking the carousel behavior beyond our dreams 😉.

Best,
David

[jordanade]

Love to see this. @openscript did you happen to make any progress on this?

[openscript]

At least I have never started doing anything related to this.

[mustafa0x]

Has anything been done here? Even a simple click to expand / go full screen.

[davidjerleke]

@mustafa0x the answer is no.

[mustafa0x]

Thanks @davidjerleke for the quick reply, and thanks for all your work on embla!

[davidjerleke]

Stale discussion - Closing.