Another helper that Fancybox provides is the slideshow buttons. The buttons allow the user to go back and forward, play and pause, and close the Fancybox pop up from a simple bar of buttons.
Like the thumbnails helper, we will need to include the JavaScript and stylesheet files for the buttons helper.
Add the stylesheet and JavaScript tags to the
headtag of theindex.htmlfile, shown as follows:<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox- buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox- buttons.js?v=1.0.5"></script>
Next, we need to add the
buttonsoption to the settings for Fancybox:$('.fancybox').fancybox({ helpers: { buttons: {} } });Here, we have set the
helpersoption with a property ofbuttons, which is an empty object. We have to provide an object for thebuttonsoption otherwise it will not work, so we provide Fancybox with an empty object because we are not setting any property onbuttonsthemselves.You should now see and be able to use the buttons at the top of the page.
The buttons are HTML links that call some of the API methods provided by the Fancybox plugin when clicked.
The buttons can have two settings defined for them, the tpl (template) to use to create them and the position property, which is used to position the buttons.
The position setting allows us to tell the buttons whether to position them along the top or the bottom of the screen. By default, the buttons display along the top of the screen. If we set the position property of the buttons settings object to be bottom, then the buttons will be displayed along the bottom of the screen.
$('.fancybox').fancybox({
helpers: {
buttons: {
position: 'bottom'
}
}
});Here, we have set the position property of the buttons settings object to be bottom, so our buttons will be displayed along the bottom of the screen.
The Fancybox buttons helper allows us to provide an HTML template to render the buttons. The default buttons use a template as in the following code:
<div id="fancybox-buttons" class="bottom special"> <ul> <li><a class="btnPrev" title="Previous" href="javascript:;"></a></li> <li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li> <li><a class="btnNext" title="Next" href="javascript:;"></a></li> <li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li> <li><a class="btnClose" title="Close" onclick="jQuery.fancybox.close()"></a></li> </ul> </div>
I would recommend starting with the default button template and modifying it if you want to adjust the template at all. I would also recommend changing the template by using an HTML element on the page using the following steps:
Create the template on the page inside the
index.htmlfile, shown as follows:<div class="hidden"> <div id="fancybox-buttons" class="bottom special"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a> </li></ul></div> </div>
Note that in the example, we placed the
fancybox-buttonsdiv inside thedivtag with thehiddenclass, which makes it such that the buttons are not displayed on the page until Fancybox is displayed.Retrieve the element from the page via jQuery and set it into the
tplsetting, shown as follows:$('.fancybox').fancybox({ helpers: { buttons: { position: 'bottom', tpl: $('#fancybox-buttons') } } });In the previous code, we have set the
tplproperty of thebuttonssettings object to be the entirefancybox-buttonsdiv, which we have retrieved from the HTML document via jQuery.