Key Binding / Gallery / fancybox v2.x DEMO

By JFK http://stackoverflow.com/users/1055987/jfk

by gk

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div id="wrapper">
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt=""/></a>
 <a rel="gallery" class="fancybox" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg"><img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt=""/></a>

</div>

CSS

#wrapper img {
    max-height: 100px
}

JavaScript

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        helpers: {
            title: {
                type: "inside"
            }
        },
        keys: {
            next: {
                13: "left", // enter
                34: "up", // page down
                39: "left", // right arrow
                // 40: "up" // disable down key
            },
            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
        },
        beforeShow: function () {
            $(document).on("keydown", function (e) {
                e.preventDefault();
                var code = e.which || e.keyCode;
                if (code == 40) {
                    $.fancybox.jumpto($.fancybox.current.index + 2)
                }
            });
            this.title = "Image " + ($.fancybox.current.index + 1) + " / " + $.fancybox.group.length + "";
        },
        afterClose: function () {
            $(document).off("keydown")
        }
    }); // fancybox
}); // ready