Let's take a look at the settings that Fancybox exposes us to for image slideshows. We can change the speed of the slideshow, whether or not it will automatically begin playing when it is opened, whether or not it will loop, and what image should be displayed first.
We're going to use the same image gallery we have been using throughout the book. You can find the code for this recipe in the Changing slideshow settings folder in the code bundle.
The first setting we are going to adjust is the speed of the slideshow. The speed can be changed by adjusting the
playSpeedsetting. The speed is the duration that an image will stay on the slideshow (in milliseconds). The speed can be set by using the following code:$('.fancybox').fancybox({ playSpeed: 1000 });Here we are setting the
playSpeedsetting to1000, which will mean that each image will stay on the screen for only one second (1000 milliseconds). The defaultplaySpeedis 3000 milliseconds.Now that we have the slideshow playing faster, let's make it play immediately after Fancybox displays the images. The
autoPlaysetting allows us to do exactly that.$('.fancybox').fancybox({ playSpeed: 1000, autoPlay: true });Now we are setting
playSpeedto be 1000 milliseconds and we are settingautoPlaytotrue, which will make the slideshow play as soon as Fancybox opens. TheautoPlaysetting defaults tofalse.Right now our slideshow will start over when it reaches the last image in the gallery. If we want it to stop when it reaches the last image we can set the
loopsetting tofalse.$('.fancybox').fancybox({ playSpeed: 1000, autoPlay: true, loop: false });Now that we have
loopset tofalseour slideshow will stop with the last image. The default value for theloopsetting istrue.Fancybox also allows us to set the number of images to preload when the gallery is opened via the
preloadsetting. Thepreloadsetting takes the number of images for Fancybox preload. Since our gallery is small, let's just have Fancybox preload all four images.$('.fancybox').fancybox({ playSpeed: 1000, autoPlay: true, loop: false, preload: 4 });Now Fancybox will preload all four of our images for the slideshow. The default value for the
preloadsetting is3.
All of the settings we looked at previously are used by default in Fancybox. When we adjust the settings they are actually being overridden. If you would like more information on how the settings for jQuery plugins work, I would recommend looking into the jQuery.fn.extend() function. You can find the details on the jQuery API site at http://api.jquery.com/jQuery.fn.extend/. The jQuery.fn.extend() method is the accepted and the most common way to write jQuery plugins.
There are a few other settings we can change for slideshows. They are considerably less useful than the other settings, but they may be important to know.
The index setting is used to specify the image that the gallery will start on by default. This setting only applies when the slideshow is triggered manually. Triggering Fancybox manually is as simple as calling the $.fancybox.open() function. This function takes an array of JavaScript objects that represent images and creates a Fancybox slideshow from them. This would look like the following code:
$(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox.open([
{href:"images/waterfall.png"},
{href:"images/frozen-lake.png"},
{href:"images/road-in-forest.png"},
{href:"images/boston.png"}
],
{
index: 2
});
});
});Here we are listening for the click event on the link with the class of fancybox. When the link is clicked on, we are telling Fancybox to open manually and providing it with an array of images to load as part of our slideshow. We are then specifying the index to start at 2. Since we provided an index of 2, the slideshow will start on the third image (the slideshow index is zero based).
The direction setting allows us to tell Fancybox from which direction the next or previous image should animate into view. The default for next is left and previous is right. We can change them to be the opposite using the direction setting, as shown in the following code:
$('.fancybox').fancybox({
playSpeed: 1000,
autoPlay: true,
direction: {
next: 'right',
prev: 'left'
}
});Now the next image will slide in from the right and the previous image will slide in from the left.