Using the gallery plugin
Overlay demo 9 / 9 : Using the gallery plugin
Here is the Gallery plugin for overlay in action. Use the arrow keys to navigate through the images. This is a true example of how extendable the overlay tool is.
HTML setup for thumbnails
Here are the trigger elements for overlay. The large image that is being viewed with the overlay is given in the href attribute. The title attribute will be shown in the overlay's info box. This kind of standard syntax will behave well on browsers that do not support JavaScript. The title attribute can also be seen when you move your mouse over the thumbnail and is readable by search engines.
<!-- list of thumbnails -->
<div id="thumbs">
<a href="path/to/big-picture1.jpg" title="Image description #1">
<img src="path/to/thumbnail1.jpg" /></a>
<a href="path/to/big-picture2.jpg" title="Image description #2">
<img src="path/to/thumbnail2.jpg" /></a>
<a href="path/to/big-picture3.jpg" title="Image description #3">
<img src="path/to/thumbnail3.jpg" /></a>
<!-- and so on ... -->
</div>HTML setup for the overlay
Here is our overlay and the nested elements that are crucial for the gallery plugin:
<!-- overlay element -->
<div class="simple_overlay" id="gallery">
<!-- "previous image" action -->
<a class="prev">prev</a>
<!-- "next image" action -->
<a class="next">next</a>
<!-- image information -->
<div class="info"></div>
<!-- load indicator (animated gif) -->
<img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" />
</div>CSS coding
Two CSS files are being used: overlay-basic.css for styling the overlay which already has been used in our minimal setup and overlay-gallery.css for styling the gallery-specific elements inside the overlay. Here are some important snippets from the gallery CSS file:
.next, .prev {
/* absolute positioning relative to the overlay */
position:absolute;
top:40%;
/* upcoming CSS3 rounded border feature */
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/* progress indicator (animated gif). should be initially hidden */
.progress {
position:absolute;
top:45%;
left:50%;
display:none;
}
/* active thumbnail is raised on top of the mask using the z-index property */
#thumbs a.active img {
outline:1px solid #000;
z-index:9999;
position:relative;
}JavaScript setup
We use the overlay just like before except that we now chain a gallery call after the overlay call. This gallery plugin accepts its own set of configuration properties and here we tweak the speed parameter as an example:
// select the thumbnails and make them trigger our overlay
$("#triggers a").overlay({
// each trigger uses the same overlay with the id "gallery"
target: '#gallery',
// optional exposing effect
expose: '#f1f1f1'
// let the gallery plugin do its magic!
}).gallery({
// the plugin accepts its own set of configuration options
speed: 800
});