Fancybox provides the ability to have a thumbnails display under an image gallery. Let's take a look at getting the thumbnails displayed under our image gallery.
We're going to use the image gallery that we already created in the Creating an image gallery recipe. If you don't have yours available, you can find a simple image gallery in the example code.
Remember all of those extra files that come with the Fancybox download? We need to add the stylesheet and JavaScript files necessary for the thumbnails to work. In the
headtag of ourindex.htmlfile, add the following two lines:<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox- thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox- thumbs.js?v=1.0.7"></script>
We have now loaded the necessary files for the thumbnails helper. Helpers are supplemental functionality to the Fancybox plugin. They aren't required for the plugin to work but they can provide some great additional functionalities.
Next, we need to tell Fancybox to use the thumbnails helper. We do that by passing the Fancybox call a setting as follows:
$('.fancybox').fancybox({ helpers: { thumbs: { width: 75, height: 50 } } });In the given code, we are calling Fancybox with a
helperssetting, which has athumbsproperty that has two properties:widthandheight. Thewidthandheightproperties define the width and height of the displayed thumbnails. You should now see the thumbnails along the bottom of your window as shown in the following screenshot:
The thumbnails helper creates image tags along the bottom of the screen, which contain the same images that will be displayed as part of the gallery. It simply constrains the height and width of the images using CSS. When you click on an image, the helper takes you to the gallery of that image and adjusts the positioning of the thumbnails.
The thumbnails helper has a few settings that we can use to adjust its positioning as well as the way it determines the source of the thumbnail images. We're also going to take a look at applying styles to the thumbnails to adjust their positioning in the window.
The thumbnail sources are, by default, the exact same images as the large ones. By using the exact same images, the load times of the thumbnails will be significantly greater and the thumbnails will require considerably more bandwidth. Let's take a look at adjusting the location of our thumbnails. We can use the source setting of the thumbnails helper to provide a function, which provides the URL for each image's thumbnail. Let's change the source of the thumbnails for the image gallery:
In the
index.htmlfile, add thedata-thumbnailattribute to each image. The value should be the thumbnail you want to use for the image, shown as follows:<a class="fancybox" rel="gallery" data-thumbnail="images/frozen-lake-sm.png" href="images/frozen-lake.png">Frozen Lake</a>
Add the
sourceproperty to the thumbnails settings object:source: function(image) { return $(image.element).data("thumbnail"); }Have the function return the URL that matches this image's thumbnail. In this case, it should return the
data-thumbnailattribute's value, which we get by using the jQuerydatamethod and telling it that we want to get thethumbnaildata item, or thedata-thumbnailattribute, shown as follows:$('.fancybox').fancybox({ helpers: { thumbs: { width: 75, height: 50, source: function(image) { return $(image.element).data("thumbnail"); } } } });The call to Fancybox should now look something like the given code, with all of our settings being passed in.
The thumbnails can be positioned to either the top or the bottom of the screen. The default is to have the thumbnails at the bottom of the screen, but if you want to make them visible at the top of the screen, simply add the position property to the thumbs settings object, shown as follows:
$('.fancybox').fancybox({
helpers: {
thumbs: {
width: 75,
height: 50,
source: function(image) {
return $(image.element).data("thumbnail");
},
position: 'top'
}
}
});With the position: 'top' setting applied, you should see the thumbnails along the top of the window.
What if we want the inline content to only show up in the Fancybox pop up? This can be done with simple CSS. All we have to do is make the div tag with the ID of inline have a style tag of display: none. In the head tag at the top of the index.html page, add a style block as follows:
<style type="text/css">
#inline {
display: none;
}
</style>This style block applies the display: none CSS to any element with an ID of inline. We also need to undo the function that we defined in the earlier section, so make sure that the Fancybox call on the show-popup links is back to:
$('.show-popup').fancybox();Now, the content should be hidden when the page loads, visible in the Fancybox pop up, and hidden once Fancybox closes.