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. More about image hosting within our documentation. - 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.