Image Gallery as a Carousel with Lightbox functionality in Oxygen

OxyExtras makes it incredibly easy to have the thumbnails of WordPress/ACF/Meta Box gallery appear as carousel items which when clicked shows the corresponding larger image in a lightbox when using Oxygen.

It is possible to have the lightboxes from multiple carousels be treated as a single one or separate ones. By single, what we mean is that clicking next when viewing the last image of the first carousel (inside the lightbox) will show the first image of the second carousel. When they are separate, the lightboxes will act independently.

Let’s see how this can be put together without writing a single line of code using the Carousel Builder and Lightbox components.

Enable Carousel Builder and Lightbox components in OxyExtras’ settings.

In the Oxygen editor add a Carousel Builder component.

Select one of the galleries as the source of your images in the “Carousel content” dropdown.

In this example, let’s go with “Media Library gallery”. Click Browse and select/upload your desired images.

Set “Add links to images” to True.

Make any other configuration changes as needed.

Select the carousel’s parent element and add a Lightbox component so it is at the same level in the structure as the carousel.

Set “Lightbox content” to “Manual (using links)”.

Set “Link Selector” to .oxy-carousel-builder_gallery-image

Set “Group into slides” to Group.

That’s it.

Check on the front end and you can see that clicking on any of the thumbnail images in the carousel will open a larger version of that image in the lightbox with controls for autoplay slideshow, next etc.

Multiple carousels

Let’s now look at the case where you have more than 1 carousel on the same page that you would like to use lightbox with.

Go ahead and duplicate the carousel and lightbox components from before and move them so they are below the first lightbox.

Without any other changes, at this state, the carousels will behave as if they are combined i.e., left/right image navigation within the lightbox will flow between the two carousels.

If you wish to separate them, change “Link Selector” for the first lightbox to -carousel-builder-25-2 .oxy-carousel-builder_gallery-image where -carousel-builder-25-2 is the ID of the corresponding i.e., first carousel.

Similarly change the “Link Selector” for the second lightbox.

and we are done.