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