Using App Connect Lightbox with Thumbnails

Using App Connect Lightbox with Thumbnails

Learn how to use App Connect Lightbox with image thumbnails

With this movie we will show you how to use App Connect Lightbox with image thumbnails.
Step by Step

First, let's add the thumbnail image on our page. Click on your page (1), and open the insert menu (2). Then, select image (3).

Browse to the thumbnail image you want to use. Select it (1), and click ok (2).

Then, in the properties panel (1) in the link field select the big image you want to load in the lightbox (2). And click ok (3).

We are done setting up our thumbnail, so let's add app connect to the page.

If you want to setup the lightbox settings, click add new component (1). If you want to use the default ones, just skip this step. Under animation (2), select lightbox options (3). 

Choose whether to run lightbox on full screen and whether to show or hide page scroll bars when it is open (1). Setup the buttons, animation type and preloader options (2). 

Select the thumbnail on your page when you are done setting up lightbox options (1). Make sure you've selected the link wrapped around the image tag (2). Add a new dynamic attribute (3). Under display (4), select open in lightbox (5).

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

That's how easy it is to use app connect lightbox with thumbnails.

Extensions Covered

Comments

Be the first to write a comment

You must me logged in to write a comment.