Image captions in Lightbox with OxyExtras Carousel Builder and Oxygen Repeater

We recently showed how images from the media library can be output in Oxygen's Repeater here.

In this members-only tutorial we shall

1. have OxyExtras' Carousel Builder converting a Repeater into a carousel
2. input a bunch of images by their IDs to the above Repeater
3. set each Repeater's item to be the image's thumb
4. set up clicking of the thumb to show a larger version of that image plus its data like title, caption, text + a link to download the full image inside a Lightbox

Step 1

Implement the Media Library Images in Oxygen's Repeater tutorial except for the last step.

Step 2

Add a Carousel Builder component inside the Section and move the Repeater inside it.

Carousel content: Repeater

Step 3

Edit the images in Media Library that are being shown in the Repeater and for each, fill Title, Caption and Description fields.

Step 4

Let's define a custom function that returns the requested data for the image attachment.

Add a code snippet.

Title: Get image data by attachment ID

Code: