12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jun 10, 2022

Image captions in Lightbox with OxyExtras Carousel Builder and Oxygen Repeater

Sridhar Katakam

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


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.