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 data-frame attribute to our image tags. To add a title and description to the image, we utilize the title attribute and a data-description attribute.

<img data-frame="img/photos/crops/bp1.jpg" src="img/photos/bp1.jpg" title="Lone Tree Yellowstone" data-description="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({
    enable_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.