EverWeb Codebox

Shadowbox

Image Grid Modal Slider

ShadowBox is a modal popup which can display more or less anything you want to put in it such as images, movies, html and so on...

This demo uses the stand alone version but you can also download an adapter version to suit which ever javascript library you are using such as jQuery, Prototype or MooTools.

Shadowbox is very versatile and can be set up in a number of ways. It can be used lightbox style to display single images from a thumbnail grid or, like this version, as a slideshow. The slider can be set for auto advance by using any number above 0 in the slideshowDelay function in the javascript setup.

In this example “modal” is set to “true” so that the expanded image can be dismissed by clicking outside of it as well clicking the “X”.

“Continuous” is also set to true so that the visitor can advance from the last slide directly to the first.

Notice how Shadow box handles different sizes of images automatically.

The images can have a caption which utilises the title attribute in each anchor tag.

In this version the slideshow control bar shows the slide numbers which can be used as an alternative to the back/forward arrows..

Shadowbox can also be used to display movies. These can be set to autoplay if desired and there's an option to show/hide the movie controls.

Thumbnails can be created automatically from the full size images but it is better to create them yourself and reference them in the HTML for a faster loading slider.

<div id="slider">

<a href=".. path to image ../1.jpg" rel="shadowbox[gallery]" title="Title Text for Caption"><img class="thumb" src=".. path to thumb ../1t.jpg" alt="Alt Text"></a>

<a href=".. path to image ../2.jpg" rel="shadowbox[gallery]" title="Title Text for Caption"><img class="thumb" src=".. path to thumb ..t.jpg" alt="Alt Text"></a>

<!-- add more as necessary -->

</div>

Suilven Shelter Bay Glencoe Back of the Ocean Highland Autumn Lighthouse Staffa Fingal's Cave Basaltic Columns Tidal Mist Emerald Bay Castle Sunset

HTML

The slides are referenced in an <a> tag along with the relationship, title attribute and an <img> tag for the thumbnail with an alt attribute to add info for SEO.

rel="shadowbox[gallery]" launches a slideshow from the thumb.

rel="shadowbox" in any <a> tag will launch the image only which means that Shadowbox can be used to show single images from a grid of thumbs rather than a slideshow.

Image Gallery or Single Photos

Multiple Sliders from an Image Grid

Shadowbox can be used to create an iWeb style Albums page where multiple slideshows can be launched from an image grid.

Each slideshow is given a unique ID such as "gallery1", "gallery2" and so on...

Each <a> tag uses the gallery ID like this rel="shadowbox[gallery1]", rel="shadowbox[gallery2]" etc

Like other sliders, Shadowbox requires a link to the external CSS file in the Page Head Code box and a link to the shadowbox.js file and some setup javascript in the Footer Code box.

Other Scripts

Basic Javascript Setup

<script type="text/javascript">

Shadowbox.init();

</script>

See the full list of options HERE.

Find out all about Shadowbox in the Developer's Website.