Adding a lightbox preview to a smaller, optimized image on your landing page is a great way of allowing your visitors to check out any of your small images in full-sized, full-detail glory, while keeping the loading times down on your landing page.
- If you don’t already have the image thumbnail on your page, drag and drop the Image
widget on the left.
Note:
You’ll want to upload your full sized images to a free external image hosting service such as Amazon Web Services (AWS). Make sure to take note and save the image URL from whichever hosting service you use. - Adjust the image dimensions on your landing page to your satisfaction.
- Click on your image. This will load its properties pane on the right-hand side of the screen. Scroll down to the Click Action section of the tab.
- In the Click Action section, Select the ‘Open URL in Lightbox’ option in the Action menu.
- In the URL field, enter the url for your full-sized image.
- Use the Target drop-down menu to determine where your image loads. If you’d like your image to load in a new window, select the ‘New tab or window’ option.
- Save and Publish/Republish your page.
All set! When you click that image on your landing page, it should load a larger resolution of that image in a new lightbox.
Note: The Builder can support a maximum of 20 lightboxes per page.