Juicebox Configuration Options

Triggers fullscreen mode when clicking the 'expand' button for supported browsers (Firefox, Safari and Chrome).

Relative or absolute URL to the theme CSS file. Useful if you want to load a theme from a different location than the default.

If themeUrl is not specified, Juicebox will look for the theme CSS relative to the juicebox.js file (classic/theme.css).

Relative or absolute URL of the gallery folder. Useful when embedding Juicebox into a HTML page that is outside the gallery folder. View more info here.

If set, all relative URLs to gallery content (imageUrls, thumbUrls and configUrl) will be relative to this URL.

This option allows the user to force a Screen Mode for all devices. It is recommended to set this to "AUTO" to best handle all devices. Can be:

• AUTO
• LARGE
• SMALL

If true, navigating to a new image will navigate to a new URL in the browser address bar, like this: http://www.mysite.com/mygallery/#12 allowing the user to use the Back Button to step back through images. This option also enables direct links to a specified image in a gallery by appending the image id.

Whether keyboard can be used to control the gallery. The gallery must be clicked on by the user to enable keyboard controls. Supported keys are:

• Next Image - Cursor Right, J
• Prev Image - Cursor Left, K
• Toggle AutoPlay - Spacebar
• First Image - Home Key
• Last Image - End Key

Controls how galleries behave when the user clicks the 'Expand Gallery' button. Expanded galleries can either open in the same page or in a new page. See here for more details. Can be:

• AUTO - If not on iOS open in same page. If on iOS and viewport is locked, open in same page. If on iOS and viewport is not locked, open in a new page.
• TRUE - Always open in a new page
• FALSE - Always open in the same page. For this to work correctly on iOS, the gallery page must have a locked viewport.

Position of gallery title. Can be:

• OVERLAY - Gallery title sits over main image
• TOP - Gallery title sits above main image
• ABOVE_THUMBS - Gallery title sits above the thumbnail area
• NONE

Horizontal alignment of the gallery title. Can be:

• LEFT
• CENTER
• RIGHT

How to transition between images. Only applies for Large Screen Mode and Mouse Input Mode. Can be:

• SLIDE Previous image slides out while next image slides in.
• FADE: Previous image fades down to background color then next image fades in.
• CROSS_FADE: Crossfade between previous and next image.
• NONE: No transition. Next image pops in.

Horizontal alignment of the image within the image area. (Large Screen Mode only) Can be:

• LEFT
• CENTER
• RIGHT

Vertical alignment of the image within the image area. (Large Screen Mode only) Can be:

• TOP
• CENTER
• BOTTOM

Determines what happens when the user clicks on an image. Can be:

• NAVIGATE - Enables Previous/Next image navigation via Image Navigation Arrows.
• OPEN_URL - Enables left-click image to open a URL. Opens optional ‘linkURL’ + linkTarget’ in image tags, or defaults to imageURL. Setting this to true disables image navigation.
• NONE - Image click has no action.

Determines how the main image is scaled to fit the available area. Can be:

• SCALE_DOWN: Scale large images down to fit Image Area, maintaining aspect ratio. Will not scale images up, which can reduce image quality.
• SCALE: Scale images up AND down to fit Image Area, maintaining aspect ratio.
• FILL: Scale images up and down to completely fill Image Area. Large images are cropped to fit image area.
• STRETCH: Stretch image to exactly fit Image Area, losing image's aspect ratio.
• NONE: No scaling. Large images are cropped to fit Image Area.

Determines how images are preloaded. Also controls if images are kept in memory after being viewed. (Large Screen Mode only.) Can be:

• PAGE - Preloads all images in the current thumbnail page. Unloads all images in the previous thumbnail page.
• NEXT - Preloads image after currently viewed image. Unloads previously viewed images.
• ALL - Preloads all images in gallery. Maximum usability. Images never unloaded. Not good for large galleries (image count > 50).
• NONE - No image preloading. Conserves server bandwidth at cost of slower responsiveness.

When to show the image overlay. Can be:

• AUTO - For mouse devices, show overlay when mouse is over the main image, hide it when mouse is outside. For touch devices, tap screen to toggle overlay.
• ALWAYS - Always show image overlay.
• NEVER - Never show image overlay.

The position of the main image navigation arrow buttons. Can be:

• STAGE - Nav button positions are relative to the stage area. Position does not change as image size changes.
• IMAGE - Nav button positions are relative to the current image. Position changes as the image size changes.

Position of thumbnails. Can be:

• TOP - Above the main image.
• BOTTOM - Below the main image.
• LEFT - Left of the main image.
• RIGHT - Right of the main image.

Horizontal alignment of the thumbnails within the thumbnail area. (Large Screen Mode only) Can be:

• LEFT
• CENTER
• RIGHT

Vertical alignment of the thumbnails within the thumbnail area. (Large Screen Mode only) Can be:

• TOP
• CENTER
• BOTTOM

Position of thumbnail navigation arrows. Can be:

• CENTER - Vertically centered in the thumbnail area.
• BOTTOM - Below the thumbnail area.

Position of the Button Bar. Can be:

• OVERLAY - Button Bar sits over main image. Button bar position is relative to the entire stage.
• OVERLAY_IMAGE - Button Bar sits over main image. Button bar position is relative to the main image.
• TOP - Button Bar sits above main image
• NONE

Horizontal alignment of the Button Bar. Can be:

• LEFT
• CENTER
• RIGHT

Position of the caption and title relative to the main image (Large Screen Mode only). Can be:

• OVERLAY - caption sits over the main image. Caption width matches entire stage.
• OVERLAY_IMAGE - caption sits over the main image. Caption width matches the main image.
• BELOW_IMAGE - caption placed between main image and thumbnails. Caption width matches the main image.
• BOTTOM - caption placed at bottom of gallery. Caption width matches entire stage.
• BELOW_THUMBS - caption placed under thumbnails. Caption width matches thumbnail area.
• NONE

Horizontal alignment of the caption text within the caption area. Image number text always stays on the right of the caption area. Can be:

• LEFT
• CENTER
• RIGHT

Relative or absolute URL to a JPG, PNG or GIF image to load as the gallery background.

Defines how the background image is scaled to fit the gallery. Can be:

• STRETCH - Stretch image to exactly fill gallery, losing image's aspect ratio.
• FILL - Scale image to completely fill gallery without losing image aspect ratio. Image may be cropped to fill.
• NONE - No scaling.

Relative or absolute URL for the audio MP3 file (e.g. "music.mp3").

Relative or absolute URL for the audio OGG file (e.g. "music.ogg"). OGG files are required for playback in Firefox.

Position of the Back Button. (Large Screen Mode only) Can be:

• TOP - Back Button sits above the main image
• OVERLAY - Back Button sits at top of main image
• NONE - Back Button does not show

Horizontal alignment of the Back Button. (Large Screen Mode only) Can be:

• LEFT
• CENTER
• RIGHT

If set to AUTO, the Splash Page will show in Small Screen Mode and embedded at less than 100%. Can be:

• AUTO
• ALWAYS
• NEVER

Can be used instead of flickrUserName. Get a Flickr user id here.

Example: "48508968@N00"

The id of the photoset to return the photos for. (Overrides flickrUserName and flickrTags.) To get a Flickr set id, go to the set's Flickr page. The id is the last numerical string in the URL.

Example: "72157624436414524"

The id of a group who's pool to search. If specified, only matching photos posted to the group's pool will be returned. The first (one) flickrTags can also be used in a group search. Get a Flickr Group Id here.

Example: "13813978@N00"

Defines how multiple tags are combined for a Flickr tag search. Can be:

• ALL - use AND combination (image must have all tags to be displayed)
• ANY - use OR combination (image can have 1 or more tags to be displayed)

The order in which to sort returned photos. Defaults to DATE-POSTED-DESC. Can be:

• DATE-POSTED-DESC
• DATE-POSTED-DESC
• DATE-POSTED-ASC
• DATE-TAKEN-ASC
• DATE-TAKEN-DESC
• INTERESTINGNESS-DESC
• INTERESTINGNESS-ASC
• RELEVANCE

Note this option does not work for set and group searches which always use the Flickr set display order. To change the order of images in a Flickr set, check here.

Image size to load from Flickr. Can be:

• MEDIUM - 500 on longest side
• LARGE - 1024 on longest side (only exists for original images larger than 1280). If the large version does not exist, Juicebox will fetch the medium version.
• ORIGINAL - Original uploaded image dimensions. To access the original image size, the Flickr user must have a Flickr Pro Account and the image's privacy must be set to public and its license set to Attribution-NonCommercial-ShareAlike Creative Commons. Check here for more info.