Book Image

Instant Fancybox

By : Kyle Diedrick
Book Image

Instant Fancybox

By: Kyle Diedrick

Overview of this book

Fancybox is a lightweight, highly customizable jQuery plugin for displaying modal dialogs. Fancybox is incredibly versatile; it works with all sorts of different content including images, videos, iFrames, custom HTML, and even SWF files. Fancybox is also very easy to customize, making it a great tool for any pop-up-like feature. Instant Fancybox is a hands-on guide which shows you how to use and customize the Fancybox plugin. The book provides step-by-step tutorials covering everything from simple installation to complex settings and features. This makes it a great way to get familiar with and ultimately master the Fancybox plugin. This book walks you through how to get the most out of the Fancybox plugin for jQuery, starting with the installation of the plugin and how to work with the JavaScript events that Fancybox triggers. You will learn everything you need to know about setting up Fancybox to show images, image galleries and slideshows, videos, and other content. You will also learn about the settings available within Fancybox and how to leverage them to make the Fancybox popup do exciting things. The Fancybox plugin has much to offer, and this book covers all of the features it provides. This book will provide you with all the information you will need to use the Fancybox plugin effectively.
Table of Contents (7 chapters)

Changing keyboard shortcuts (Advanced)


Fancybox allows users to navigate through an image slideshow with keyboard shortcuts. Let's take a look at changing these from the default settings.

Getting ready

Fancybox relies on jQuery keypress events to determine which key was pressed. Each key is identified by a number that is its charCode. A key's charCode can be found by looking it up on http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes. For more information about retrieving charCodes from jQuery, see http://api.jquery.com/category/events/event-object/ and look at the event.which documentation.

We can change or add keybindings for these actions: next, previous, close, play, and toggle fullscreen. We're going to make the W, A, S, and D keys work for next/previous functionality; - to close; Enter to play; and + for fullscreen.

How to do it...

  1. Let's start with making the W, A, S, and D keys work for next/previous. We want to keep the default keyboard shortcuts, so we must copy the default options from the Fancybox API page. To start with, our call to Fancybox will look just like the default options:

    $('.fancybox').fancybox({
      keys: {
        next : {
          13 : 'left', // enter
          34 : 'up',   // page down
          39 : 'left', // right arrow
          40 : 'up'    // down arrow
        },
        prev : {
          8  : 'right',  // backspace
          33 : 'down',   // page up
          37 : 'right',  // left arrow
          38 : 'down'    // up arrow
        },
        close  : [27], // escape key
        play   : [32], // space - start/stop slideshow
        toggle : [70]  // letter "f" - toggle fullscreen
      }
    });
  2. Now we have an exact copy of the default settings for our keyboard shortcuts. All we have to do now is look up the character codes for the keys we want and add them to the appropriate spots in the settings. Note that we want to assign W for the up action, S for the down action, A for the left action, and D for the right action. The action directions are relative to the current image's location inside the gallery. This means that if our gallery had nine images in a three-by-three grid, we can move from the top-left corner image to the top-center image by pressing D. We can move from there to the center image by pressing S. The other actions can move around the image gallery in the same fashion. The character codes for the keys are as follows: W is 87, A is 65, S is 83, and D is 68. If we add these keys to our keys setting, it will look like the following code:

    $('.fancybox').fancybox({
      keys: {
        next : {
          13 : 'left', // enter
          34 : 'up',   // page down
          39 : 'left', // right arrow
          40 : 'up',   // down arrow
          68 : 'left', // "D" key
          83 : 'up'    // "S" key
        },
        prev : {
          8  : 'right',  // backspace
          33 : 'down',   // page up
          37 : 'right',  // left arrow
          38 : 'down',   // up arrow
          65 : 'right',  // "A" key
          87 : 'down',   // "W" key
        },
        close  : [27], // escape key
        play   : [32], // space - start/stop slideshow
        toggle : [70]  // letter "f" - toggle fullscreen
      }
    });

    We have added the D and S keys to the next setting, with D set to left and S set to up. We have added the A and W keys to the prev setting, with A set to right and W set to down. Now our W, A, S, and D keys will move the images around in the slideshow just like the arrows.

  3. Next we will set the - key to close the pop up. Because the close setting is just an array, it is as simple as adding the charCode for the - key to the array. The charCode for the - key is 189, so we can change the close setting to be as follows:

    close : [27, 189], // escape key and "-" key
  4. The next keypress we want to bind to is the Enter key. Note that the Enter key right now is bound inside the next setting, so we'll have to remove it from there, and then add it to the play setting, as shown in the following code:

    play : [32, 13],  // space and enter - start/stop slideshow
  5. The last key we want to bind to is the + key, which we will use to toggle the fullscreen mode. The charCode for + is 187.

    toggle : [70, 187]  // letter "f" and "+" key - toggle fullscreen
  6. Now all of our new key shortcuts will work and the defaults (except for Enter) will work as well. The whole call to Fancybox will now look as follows:

    $('.fancybox').fancybox({
      keys: {
        next : {
          34 : 'up',   // page down
          39 : 'left', // right arrow
          40 : 'up',   // down arrow
          68 : 'left', // "D" key
          83 : 'up'    // "S" key
        },
        prev : {
          8  : 'right',  // backspace
          33 : 'down',   // page up
          37 : 'right',  // left arrow
          38 : 'down',   // up arrow
          65 : 'right',  // "A" key
          87 : 'down'	   // "W" key
        },
        close  : [27, 189], // escape key and "-" key
        play   : [32, 13],  // space and enter - start/stop slideshow
        toggle : [70, 187]  // letter "f" and "+" key - toggle fullscreen
      }
    });

How it works...

Fancybox binds to the keydown event, which is fired from jQuery when the user presses the down arrow key. Fancybox then compares the charCode passed from the keydown event to the settings we defined in the previous code and determines the action to take based on that charCode, if any.