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.