Using App Connect Lightbox with Dynamic Data

Using App Connect Lightbox with Dynamic Data

Learn how to use App Connect Lightbox with dynamic data sources

With this movie we will show you how to use App Connect Lightbox with dynamic data sources.
Step by Step

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.

Extensions Covered

Comments

APP CONNECT LIGHTBOX

September 13, 2017 by Nancy Abismo-Provido
WILL THIS WORKS USING HTML5 AND CSS3 IN DREAMWEAVER 2017CC?

Re: Nancy

September 13, 2017 by Teodor Kuduschiev
Yes, the extension works fine on a HTML5/CSS3 based pages in CC2017.

Great stuff ...

September 13, 2017 by Brad Lawryk
How do you create the photo grid of thumbnails such as in the showcase site?

Re: Brad

September 13, 2017 by Teodor Kuduschiev
Hey Brad, It will be possible to build such a layout really soon, by using an extension of ours.

You must me logged in to write a comment.