Slideshow Examples

In this tutorial we go through a series of 4 simple examples building a slideshow application. The tutorial starts with a very simple example. Subsequent examples build on the previous one, adding more complexity.

The Simplest Example

In the first example we use a single FancyPants image object and change the image data periodically to achieve a slideshow effect. This example only swaps the images without considering aspect ratio or transitions and you would never use this code in a real application, but make sure you see the last example.

/* -------------- */
/* Simple Example */
/* -------------- */

// Determine if we are running in the browser or standalone
var fp_running_in_browser = (typeof document !== "undefined");

// We initialize differently in the browser and the standalone
if (fp_running_in_browser) 
    fp = document.fancypants;
else
    fp = fp_init();

// Set up the background to be a rectangle
var bg = fp.rectangle({ size:    { w: fp.w, h: fp.h },
                        visible: true, 
                        color:   { r: 15, g: 10, b: 25, a: 255 } 
              });

// Set up the array of images to show. We have hard coded it for this
// example but it could come from any external source.
var image_table = [ "sample_1.jpg", "sample_2.jpg", "sample_3.jpg",
                    "sample_4.jpg", "sample_5.jpg", "sample_6.jpg",
                    "sample_7.jpg", "sample_8.jpg", "sample_9.jpg",
                    "sample_10.jpg" ];

// We set up our image object. We only need 1 for this example
var img = fp.image({ visible: true,
                     coord:   { x: 0, y: 0 },
                     size:    { w: fp.w, h: fp.h },
                     skipEvent: true
             });

// Change the picture every second, remembering the last picture shown

var index = 0;
var t = fp.timer(1, function() {
    img.set("file", "images/" + image_table[index]);
    index += 1;
    index %= image_table.length;
    return true;
});

if (!fp_running_in_browser) {
    /* Start the main fp loop */
    fp.begin();
}

Video of Result

The following video shows the result of the above code.

The above example is very basic. While it does display each image in turn, the images are streched and there are no transitions.

To improve it we could:

Display each image maintaining aspect ratio
Center each image
Apply some sort of transition

In the following examples we show how this can be done step by step.

Example 2 - Maintaining Aspect Ratio

We take the previous code and make sure that the images maintain aspect ratio, while scaling to the largest possible size.

/* -------------------------------------- */
/* Maintianing Aspect Ratio and Centering */
/* -------------------------------------- */

// Determine if we are running in the browser or standalone
var fp_running_in_browser = (typeof document !== "undefined");

// We initialize differently in the browser and the standalone
if (fp_running_in_browser) 
    fp = document.fancypants;
else
    fp = fp_init();

// Set up the background to be a rectangle
var bg = fp.rectangle({ size:    { w: fp.w, h: fp.h },
                      visible: true, 
                      color:   { r: 15, g: 10, b: 25, a: 255 } 
                      });


// Set up the array of images to show. We have hard coded it for this
// example but it could come from any external source.
var image_table = [ "sample_1.jpg", "sample_2.jpg", "sample_3.jpg",
                    "sample_4.jpg", "sample_5.jpg", "sample_6.jpg",
                    "sample_7.jpg", "sample_8.jpg", "sample_9.jpg",
                    "sample_10.jpg" ];

// We set up our image object. We only need 1 for this example
var img = fp.image({ visible: true,
                   coord:   { x: 0, y: 0 },
                   skipEvent: true
                   });

var display_width  = fp.w;
var display_height = fp.h;

var index = 0;
var t = fp.timer(1, function() {

    img.set("file", "images/" + image_table[index]);

    // The "nativeSize" property returns the real size of the image,
    // the "size" property returns the size of the image object
    var image_size   = img.get("nativeSize");
    var image_width  = image_size.w;
    var image_height = image_size.h;
    var width_scale  = image_width / display_width;
    var height_scale = image_height / display_height;
    var scale_factor;

    if (width_scale > height_scale)
        scale_factor = 1 / width_scale;
    else
        scale_factor = 1 / height_scale;

    var new_w = image_width * scale_factor;
    var new_h = image_height * scale_factor;
    img.set("size", { w: new_w, h: new_h });

    // Center the object
    var x = (display_width / 2) - (new_w / 2);
    var y = (display_height / 2) - (new_h / 2);
    img.set("coord", { x: x, y: y });

    // Go to the next index
    index += 1;
    index %= image_table.length;
    return true;
});

if (!fp_running_in_browser) {
    /* Start the main fp loop */
    fp.begin();
}

Video of Result

The following video shows the result of the above code.

Example 3 - Adding a Fade Transition

The fade in / out transition still only requires a single FancyPants image object. We fade out each image object, reset the file associated with it and then fade it back in again.

// Determine if we are running in the browser or standalone
var fp_running_in_browser = (typeof document !== "undefined");

// We initialize differently in the browser and the standalone
if (fp_running_in_browser) 
    fp = document.fancypants;
else
    fp = fp_init();

// Set up the background to be a rectangle
var bg = fp.rectangle({ size:    { w: fp.w, h: fp.h },
                      visible: true, 
                      color:   { r: 15, g: 10, b: 25, a: 255 } 
                      });


// Set up the array of images to show. We have hard coded it for this
// example but it could come from any external source.
var image_table = [ "sample_1.jpg", "sample_2.jpg", "sample_3.jpg",
                    "sample_4.jpg", "sample_5.jpg", "sample_6.jpg",
                    "sample_7.jpg", "sample_8.jpg", "sample_9.jpg",
                    "sample_10.jpg" ];

// We set up our image object. We only need 1 for this example
var img = fp.image({ visible: true,
                   coord:   { x: 0, y: 0 },
                   skipEvent: true
                  });

var display_width  = fp.w;
var display_height = fp.h;

var index = 0;
var t = fp.timer(3, function() {

    // We call the fade function on the image object, fadeIn is
    // set to false meaning the image object fades out, to transparency.
    // The second argument is a callback which we inline as an anonymous
    // function. FancyPants effects all have callback arguments which
    // can be inlined anonymously
    img.fade({ fadeIn: false,
           callback: function() {

           //  When the fade out completes, this function is called

           // Set the file for the next image, resize and fade in
           // at the end of this function
           img.set("file", "images/" + image_table[index]);

           // The "nativeSize" property returns the real size of the image,
           // the "size" property returns the size of the image object
           var image_size   = img.get("nativeSize");
           var image_width  = image_size.w;
           var image_height = image_size.h;
           var width_scale  = image_width / display_width;
           var height_scale = image_height / display_height;
           var scale_factor;

           if (width_scale > height_scale)
               scale_factor = 1 / width_scale;
           else
               scale_factor = 1 / height_scale;

           var new_w = image_width * scale_factor;
           var new_h = image_height * scale_factor;
           img.set("size", { w: new_w, h: new_h });

           // Center the object
           var x = (display_width / 2) - (new_w / 2);
           var y = (display_height / 2) - (new_h / 2);
           img.set("coord", { x: x, y: y });

           // Go to the next index
           index += 1;
           index %= image_table.length;

           // Finally fade the new image in. We don't use the callback
           // parameter to this invokation
           img.fade({ fadeIn: true });
           }});
    return true;
});

if (!fp_running_in_browser) {
    /* Start the main fp loop */
    fp.begin();
}

Video of Result

The following video shows the result of the above code.

Example 4 - Cross Fading

Cross fading is more complex than simple fade in / out. Cross fading requires multiple image objects as more than one is fading simultaneously. FancyPants makes it simple to do this.

// Determine if we are running in the browser or standalone
var fp_running_in_browser = (typeof document !== "undefined");

// We initialize differently in the browser and the standalone
if (fp_running_in_browser) 
    fp = document.fancypants;
else
    fp = fp_init();

// Set up the background to be a rectangle
var bg = fp.rectangle({ size:    { w: fp.w, h: fp.h },
            visible: true, 
            color:   { r: 15, g: 10, b: 25, a: 255 } 
              });


// Set up the array of images to show. We have hard coded it for this
// example but it could come from any external source.
var image_table = [ "sample_1.jpg", "sample_2.jpg", "sample_3.jpg",
                    "sample_4.jpg", "sample_5.jpg", "sample_6.jpg",
                    "sample_7.jpg", "sample_8.jpg", "sample_9.jpg",
                    "sample_10.jpg" ];

// We set up our image object. We only need 1 for this example
var img1 = fp.image({ visible: true });

var display_width  = fp.w;
var display_height = fp.h;

var index = 0;

// Separate out the code for setting the image object's
// width, height and coordinates into function
function set_image_geometry(img) {

    // The "nativeSize"" property returns the real size of the image,
    // "size" returns the size of the object
    var image_size   = img.get("nativeSize");
    var image_width  = image_size.w;
    var image_height = image_size.h;
    var width_scale  = image_width / display_width;
    var height_scale = image_height / display_height;
    var scale_factor;

    if (width_scale > height_scale)
    scale_factor = 1 / width_scale;
    else
    scale_factor = 1 / height_scale;

    var new_w = image_width * scale_factor;
    var new_h = image_height * scale_factor;
    img.set("size", { w: new_w, h: new_h });

    // Center the object
    var x = (display_width / 2) - (new_w / 2);
    var y = (display_height / 2) - (new_h / 2);
    img.set("coord", { x: x, y: y });
}


// Initialize with the first image being shown.
img1.set("file", "images/" + image_table[index]);
set_image_geometry(img1);
img1.fade({ fadeIn: true });

var t = fp.timer(3, function() {

    // This implements a cross fade between the image objects

    // We need to create a new image object each time so that we know
    // know which image to fade in / out. There are other ways to do
    // this but this is one of the simples ways
    var img2 = fp.image({ visible: true });

    // Go to the next index
    index += 1;
    index %= image_table.length;

    img2.set("file", "images/" + image_table[index]);
    set_image_geometry(img2);
    img2.fade({ fadeIn: true });

    img1.fade({ fadeIn: false, callback: function() {

    // Assignment of object variables works like C pointer assignment,
    // it does not copy the object, both variables refer to the same
    // underlying object.
    // We assign img1 to be img2 object once the fade has completed,
    // in the callback.
    img1 = img2;

    }});

    return true;
});

if (!fp_running_in_browser) {
    /* Start the main fp loop */
    fp.begin();
}

Video of Result

The following video shows the result of the above code.