Image Lightbox Effect
What is Lightbox?
The EverWeb default gallery widget uses a lightbox derivative - prettyPhoto - to produce a modal containing a slideshow of the images contained in a gallery of thumbnails. The Sliders section of this website features Shadowbox which is very slick and easily customized.
This page shows how to set up Shadowbox very simply to popup a single image from a thumbnail - rather than a slideshow.
This space saving technique is used a lot on instructional and informational websites since a large image can be popped up from thumbnails placed anywhere in the page rather than from a grid. This enables the thumbnails to be placed along with the relevant text.
The HTML to be pasted into an HTML Snippet to create the thumbnail and the popup image is shown below.
The relative paths to both the large and the thumbnail images are obtained by contol clicking their file names in the Assets column in the usual way and pasting them in where marked in red and green respectively.
Captions are created by entering them into the title attribute and descriptive text for the SEO spiders is entered into the Alt attribute. Leave the title blank if captions aren't required.
<a rel="shadowbox" href=".. relative path to the.. /large-image.jpg" title="EverWeb Widgets"><img src=".. relative path to the.. /thumbnail.jpg" alt="Image Alt Text" /></a>
The overlay opacity can be changed in the setup script as shown below...
Drag the shadowbox.css into Assets and control click it to get the relative path. Paste it into the code below where marked in green.
Then paste the code into the page Head Code box.
<link rel="stylesheet" type="text/css" href=".. relative path to ../shadowbox.css">
Then, all that's required to insert an image anywhere, is to paste the HTML into a Snippet with the appropriate file paths, caption and alt text.
Download the files from the Developer's Website.