Creating Juicebox Galleries

Adding Audio

To add audio to your gallery, copy an MP3 file to the gallery folder, then use the Audio Options to set the path to the MP3 file and set other audio options.

Note - Audio options are not supported in Internet Explorer version 8 and below.

Audio Options will not work in JuiceboxBuilder. To test audio playback, preview your gallery in a browser.

Adding Watermarks

Automatically add watermarks in the Images Panel of JuiceboxBuilder-Pro. Watermark images should be PNGs with a transparent background. To give extra padding, insert extra space into the watermark image.

Adding a Logo

There are multiple ways to add a logo or branding image to your gallery:

1. Add a logo as a watermark over the main image using JuiceboxBuilder-Pro.
2. Add a logo as the background image of the gallery via the Background Image options. Set the BackgroundURL option to point to your logo image. Set backgroundScale to 'NONE'.
3. Add a logo into the gallery title area. Create a logo image file in the gallery folder. Using JuiceboxBuilder-Pro, set the title text to <img src="mylogo.png"/> Set galleryTitlePosition to 'TOP'. Logos added in this way should be less than 50 px tall.
4. Add a logo in the HTML page that embeds your gallery.

International Gallery Text

Juicebox supports non-English gallery text via the 'languageList' option. Use this option to specify alternative language for the gallery interface, including button tooltips.

View an example Juicebox gallery translated to Chinese.

LanguageList is a list of translated text seperated by vertical bars. Translated text must match the specified item order. To add non-English gallery text, set the languageList option as follows.

Juicebox-Lite requires the following items.

"Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images"

Juicebox-Pro requires the following items:

"Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of|Send Email|Download|Password|Incorrect Password.|Regarding image|in gallery"

Converting a SimpleViewer Gallery

Easily convert SimpleViewer galleries to Juicebox galleries using JuiceboxBuilder The original image and caption data will be preserved. Some config options may not automatically translate and may require manual tweaking. To convert your gallery:

1. Make a copy of your existing gallery folder.
2. Use JuiceboxBuilder to open the copied gallery folder.
3. Go to the Publish panel and click 'Save'. To avoid overwriting your existing HTML, enter a different name as the Index Page Name.

Manually Creating a Gallery

To build a Juicebox gallery manually using a text editor and image editing software of your choice, foillow these steps:

1. Create Gallery Folder

Make a copy of the 'web' folder in the Juicebox download folder. This will be your gallery folder.

2. Add Images

Copy your images to the gallery folder 'images' folder.

3. Create Thumbnails

Create thumbnails with an image editing program (e.g. Photoshop). Place thumbnail images in 'thumbs' folder. Thumbnails should be square and at least 85x85 pixels.

4: Edit config.xml

Open config.xml in any text editing software (e.g. Notepad, TextEdit ). Set your gallery options by editing the juiceboxgallery tag attributes at the top of the file. View details on setting config options.

Next, add an <image> tag for every image in the gallery:

<image imageURL="images/tall.jpg" thumbURL="thumbs/tall.jpg" linkURL="http://www.example.com" linkTarget="_blank" >
<title>This is my title.</title> <caption>This is my caption.</caption> </image>

• imageURL is the absolute or relative path to the fullsize image.
• thumbURL is the absolute or relative path to the thumbnail image.
• linkURL is the absolute or relative path to URL that is navigated to when the user clicks the 'Open in New Window...' button.
• linkTarget is the window name that is navigated to when the user clicks the 'Open in New Window...' button.
• title - this tag contains optional text title for the image.
• caption - this tag contains optional text caption for the image.

5. Edit Embed Code (Optional)

Edit the JavaScript embed snippet in the gallery folder index.html file, to modify gallery dimensions and other options.

6. Preview in Browser

Open the gallery folder 'index.html' file in a browser to preview the gallery.

Setting Config Options

Juicebox Config Options define the behaviour of the gallery. Set these options by using JuiceboxBuilder or by editing the config.xml file directly in any text editor. To add an option by editing the XML, add a line inside the opening juiceboxgallery tag in this format:

optionName = "optionValue"

Options can also be set in the JavaScript embed code in this format:

new juicebox({optionName:"optionValue"});

If the debugMode option is set to true then options can also be set via the URL queryString in this format:

index.html?optionName=optionValue

Option precedence takes the following order: Query String -> JavaScript Embed code -> XML config file