Using App Connect Lightbox with Dynamic Data

We created a server action containing a database query, which returns the thumbnails and image paths stored in our database. It also contains image titles and descriptions (1). Open the app connect panel (2).

Add app connect to your page.

Add a new component (1). Under data (2), select server connect (3).

Then select the component we just added (1) and add the server action (2) with your images to it (3-4). Click select (5).

On our page we've setup a container with a dummy thumbnail image wrapped with a link. We'll add dynamic data to them and will repeat them, using a repeat region. In our case, we will use repeat children (1). So we select the parent container (2). And click repeat children (3).

Setup the repeat children expression (1). This is the query, from our server action (2-4).

Select the dummy thumbnail (1). Add a dynamic attribute to it (2). Under images (3), select image source (4).

Select dynamic data for it (1). We select the dynamic binding, which returns our thumbnails path (2-4).

Then, we select the dummy link wrapping our thumbnail (1). Add a dynamic attribute to it (2). Open Links (3) and select link (4).

Here we bind the big images binding (1-4).

We add another dynamic attribute (1). Open display (2) and select open in lightbox (3).

We put our images in a group so they can be scrolled when the lightbox is open (1). Optionally, you can add a title to the images. Add a new dynamic attribute (2). Under display (3), select title (4). 

Bind the dynamic value which returns the title or description for your images (1-4).

Also optionally, you can setup the lightbox appearance. If you want to use the default settings, just skip the following steps.

Add a new component (1), under animation (2), select lightbox options (3).

Enable or disable fullscreen mode for the lightbox. Also, select whether to show or hide page scroll bars when the lightbox is open (2). Then setup the buttons, animation type and preloader options (3).

And we are done! Let's preview the results.

That's how easy it is to use App Connect Lightbox with dynamic data sources.