Fancybox allows users to navigate through an image slideshow with keyboard shortcuts. Let's take a look at changing these from the default settings.
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.
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 } });
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 is65
, S is83
, and D is68
. If we add these keys to ourkeys
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 toleft
and S set toup
. We have added the A and W keys to theprev
setting, with A set toright
and W set todown
. Now our W, A, S, and D keys will move the images around in the slideshow just like the arrows.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 is189
, so we can change the close setting to be as follows:close : [27, 189], // escape key and "-" key
The next
keypress
we want to bind to is the Enter key. Note that the Enter key right now is bound inside thenext
setting, so we'll have to remove it from there, and then add it to theplay
setting, as shown in the following code:play : [32, 13], // space and enter - start/stop slideshow
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
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 } });
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.