GalleryView » Custom Thumbnails and Image Details

In this demo, we will make use of two GalleryView features, the ability to set custom thumbnail images and the addition of informational overlays. To set a custom image for the filmstrip's 'frame' elements, we add a frame attribute to our image tags. To add a title and description to the image, we utilize the title attribute and make use of the long deprecated longdesc attribute. This attribute was originally designed to contain a link to a new page which contained a long description about the image. Even though it's not strictly semantic, it serves the purpose just fine.

<img frame="img/photos/crops/bp1.jpg" src="img/photos/bp1.jpg" title="Lone Tree Yellowstone" longdesc="A solitary tree surviving another harsh winter in Yellowstone National Park. Yellowstone National Park, Wyoming. (Photo and caption by Anita Erdmann/Nature/National Geographic Photo Contest)">

We must also enable panel overlays via the appropriate plugin option:

$('#myGallery').galleryView({
    show_overlays: true
});

Photographs courtesy of boston.com November 18, 2011 article on the 2011 National Geographic Photo Contest. All photographs are copyrighted by their original owners.