API Overview

The Juicebox-Pro API (Application Programmers Interface) allows you to control Juicebox-Pro from the embedding HTML document and even create your own custom User Interfaces.

For an example of using the Juicebox-Pro API view the online demo.

Please note that the Juicebox-Pro API is provided 'as-is' to allow people with JavaScript programming experience to use as required. We cannot offer support for all possible uses of the API.

API Methods

Call API methods directly on the Juicebox object created in the embed code. For example: 

//create a gallery instance
var jb = new juicebox({
    containerid:'juicebox-container'
});
//then call an API method on it
jb.toggleAutoPlay();
The following API methods are available:

Method Description
showGallery( show: Boolean )

Show or hide gallery.
setGallerySize( width: int, height: int ) Set gallery size.
showImage( index: int ) Show image by index number. Image indices start at one.
showNextImage() Show the next image.
showPreviousImage() Show the previous image.
toggleAutoPlay() Toggles AutoPlay mode.
toggleThumbs() Toggles thumbnails display.
toggleAudio() Toggles audio playback.
toggleOverlay() Toggles main image overlay display.
toggleExpand()

Toggles expanded gallery mode.

Note: Expanded mode is only available for galleries embedded at less than 100% x 100% of the browser window.
openImageLink() Opens the current image's linkURL in window specified by the current image's linkTarget.
showThumbPage( index: int ) Shows the page of thumbnails specified by index. Page indices start at zero.
getImageInfo( index: int ): Object

Returns image details as an object for the image specified by index. Object properties are as follows:

  • imageURL (String) - relative path to main image.
  • thumbURL (String) - relative path to thumbnail.
  • title (String) - HTML title display text.
  • caption (String) - HTML caption display text.
  • linkURL (String) - optional click URL.
  • linkTarget (String) - optional click target.
  • purchaseURL (String) - optional purchase URL.
getImageCount(): int

Returns number of images in the current gallery.
getThumbPageIndex() :int Returns index of current thumbnail page.
getScreenMode() :string Returns current screen mode as 'LARGE' or 'SMALL'.
getImageIndex(): int

Returns index of current image.

API Events

The following Events are fired by Juicebox-Pro. When the event is fired the gallery instance will call a function with the same name as the event name. For example: 

//create a gallery instance
var jb = new juicebox({
    containerid:'juicebox-container'
});
//then set up an event listener
jb.onImageChange = function(e){
    alert("Image changed. Image index: " + e.id );
};

Event Description
onInitComplete Fired when Juicebox has completed initialization. The API is now available.
onImageChange(e) Fired when a new image is displayed, either via user interaction or via AutoPlay. 'e.id' is the new image index.
onThumbPageChange(e) Fired when user selects a new thumbnail page. 'e.id' is the new thumbnail page index.
onShowThumbs(showing) Fired when user toggles thumbnail visibility.
onExpand(expanded) Fired when user clicks the 'Expand Gallery' button.