Topic: Keyboard arrow key not working [SOLVED]

Forward arrow key works on all images except initial image.

This can make people think that keyboard doesn't work at all with gallery.

Any idea why? Setting or Bug?

http://www.joshuazuckerman.com/jennyandadam2/

Re: Keyboard arrow key not working [SOLVED]

Keyboard controls seem to work fine for me on the first image in your gallery as soon as the web page has loaded (in Chrome, Firefox and Internet Explorer on PC).
If the gallery is embedded in a web page alongside other content, then you would need to click on the gallery to give it focus before keyboard controls would work but this should not be necessary in a full page gallery (where the gallery's dimensions are 100% x 100% and it is the only content on the page).

Try completely clearing your browser's cache before reloading your web page to see if this helps.

To automatically give your gallery focus after the web page has loaded, you could try something like the following:

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(223,223,223,1)'
    });
    jb.onInitComplete = function() {
        $('#juicebox-container').find(':first-child').focus();
    };
</script>
<div id="juicebox-container"></div>

Re: Keyboard arrow key not working [SOLVED]

Hi Steven and jzphoto,
Im attempting to do the same thing (have the keyboard nav be active once the page is loaded rather than after clicking). My issue is that the client I am building the site for uses the Lightroom plugin because he doesnt want to have to code, so Im wondering if there is a way I can paste this little
    jb.onInitComplete = function() {
        $('#juicebox-container').find(':first-child').focus();
    };
into a template so it adds it automatically as he cranks out galleries.

Thanks,
Ryan

Re: Keyboard arrow key not working [SOLVED]

As an update to this topic, the code I posted back in 2015 worked at the time but it seems to be unreliable now (the arrow keys work for only one image transition before the gallery needs a click for keyboard controls to continue functioning).
I find that the following code seems to work well with the current version of Juicebox (v1.5.0):

jb.onInitComplete = function() {
    $('.juicebox-gallery').first().focus();
};

@ryanrowlett
If you'd like to incorporate this focus code into the Lightroom plugin (so that each 'index.html' file generated by the plugin includes this code), then you can edit the plugin's template 'index.html' file as follows.

(1) Open the plugin's template 'index.html' file in a plain text editor. (Change the directory name from 'juicebox_pro.lrwebengine' to 'juicebox_lite.lrwebengine' is you are using the Lite version of the plugin.)
Mac - Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/juicebox_pro.lrwebengine/index.html
Window - C:\Users\username\AppData\Roaming\Adobe\Lightroom\Web Galleries\juicebox_pro.lrwebengine\index.html

(2) Scroll down to the start of the 'new juicebox' embedding code section.

(3) Replace:

new juicebox({
    backgroundColor: "<%= get_rgba(model.extra.backgroundColorColor, model.extra.backgroundColorOpacity) %>",
    containerId: "juicebox-container",
    galleryHeight: "<%= model.extra.galleryHeight %>",
    galleryWidth: "<%= model.extra.galleryWidth %>"
});

... with:

var jb = new juicebox({
    backgroundColor: "<%= get_rgba(model.extra.backgroundColorColor, model.extra.backgroundColorOpacity) %>",
    containerId: "juicebox-container",
    galleryHeight: "<%= model.extra.galleryHeight %>",
    galleryWidth: "<%= model.extra.galleryWidth %>"
});
jb.onInitComplete = function() {
    $('.juicebox-gallery').first().focus();
};

As you are also a Showkase user, I should point out that this will work only if the gallery's 'index.html' page is used to display the gallery (on a page of its own).
If the gallery is subsequently imported into Showkase, then this modification will be lost. The gallery's HTML embedding page is not used when importing a gallery (only the images and configuration options in the gallery's 'config.xml' file are taken into consideration).
If you'd like the focus code to be used for Juicebox gallery pages within Showkase, then just add the following code to your theme's 'custom.js' file.

$(document).ready(function() {
    if (jb) {
        jb.onInitComplete = function() {
            $('.juicebox-gallery').first().focus();
        };
    }
});

For example, if you are using the Kosel, them, then the 'custom'js' file can be found in this location: showkase/_themes/kosel/js/custom.js
If you are using a different theme, just replace 'kosel' in the path above with the name of the theme that you are using.

Re: Keyboard arrow key not working [SOLVED]

Hi Steven,
This worked perfectly. Thank you, Ryan

Re: Keyboard arrow key not working [SOLVED]

You're welcome.
I'm glad you've got it working. Thank you for letting me know.