CODEWITHSUNDEEP
jqueryfancybox
user1924772
user1924772

Reputation: 33

Open jquery fancybox on keypress event

Would anybody know how to open/initiate the lightbox (fancybox) on keypress rather than clicking on a thumbnail? For example, if you hit the space bar the lightbox will open?

I am not that familiar with jquery so please excuse me if the answer seems obvious.

Upvotes: 0

Views: 955

Answers (1)

JFK
JFK

Reputation: 41143

You could use the following script to open fancybox pressing the letter "F" for instance : 

$(document).keyup(function(event) {
    // open fancybox pressing "F"
    if (event.keyCode === 70) {
        $.fancybox({
            href: "http://fancyapps.com/fancybox/demo/1_b.jpg"
        });
    }
}); //keyup

... the issue I see is that you cannot pass the href dynamically (as in a link) but you have to hard-code it into the script*[ See edit ].

See DEMO (you have to focus on the "result" window before pressing "F")

In order to know what key number is returned for each keyup, you could add

console.log(event.keyCode);

... to the same script (is commented out in my demo)

NOTE: this was tested with fancybox v2.1.3

EDIT (March 11, 2014) : You could actually bind fancybox to a regular link and trigger a click on that element after the keypress, so having this html:

<a class="fancybox" href="image.jpg">open fancybox</a>

You could do :

$(document).keyup(function (event) {
    // console.log(event.keyCode);
    // open fancybox pressing "F"
    if (event.keyCode === 70) {
        $(".fancybox").eq(0).trigger("click");
    };
}).ready(function () {
    $(".fancybox").fancybox();
});

That will fire fancybox either pressing "F" or clicking on the link.

See forked JSFIDDLE

Upvotes: 1

Related Questions