EverWeb Codebox

Image Lightbox Effect

What is Lightbox?

Lightbox is a javascript technique used to display images and other web content using modals. The object pops up when a text or image link is clicked and appears over an opaque background to better focus the viewers attention.

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.

EverWeb Widgets

HTML

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>

Javascript

The link to the shadowbox.js and some setup javascript are pasted into the page Footer Code box. Drag the shadowbox.js into Assets and control click it get the Relative path. Paste it into the code shown below where marked in red.

The overlay opacity can be changed in the setup script as shown below...

<script type="text/javascript" src="..path to../shadowbox.js"></script>

<script type="text/javascript">

Shadowbox.init({

    overlayOpacity: 0.9

});

</script>

CSS

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">

Any number of images can be set up this way on a page. If the feature is required on several pages of the site the CSS and Javascript can be pasted into the appropriate site wide code boxes in the Site Publishing Settings page.

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.

Click Me!

The Widgetbox has three widgets for creating lightbox style images and a lighbox gallery.

Widgets

Easy