- Support Home
- Creating Galleries
- Configuration Options
- Embedding Guide
- » Embedding in a HTML Page
- » Using an External Gallery Folder
- » Using an External jbcore Folder
- » Embedding Multiple Galleries
- » Embedding Using Dreamweaver
- » Embedding in a Joomla Site
- » Embedding in a Drupal Site
- » Embedding in a Web Template Site
- » Embedding with iWeb
- » Embedding with Adobe Muse
- » Troubleshooting Pathing Problems
- » Expand Gallery Behavior
- Frequently Asked Questions
- JuiceboxBuilder User Guide
- Version History
- Upgrading Juicebox
- Sharing, SEO and Shopping Cart
- Theming Guide
- Using the API
We recommend JuiceboxBuilder as the most powerful way to build a Juicebox gallery on your desktop.
You can build Juicebox galleries using plugins for the following 3rd party applications:
Manually Creating a Gallery
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
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>
imageURLis the absolute or relative path to the fullsize image.
thumbURLis the absolute or relative path to the thumbnail image.
linkURLis the absolute or relative path to URL that is navigated to when the user clicks the 'Open in New Window...' button.
linkTargetis 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)
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"
debugMode option is set to true then options can also be set via the URL queryString in this format:
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:
- Make a copy of your existing gallery folder.
- Use JuiceboxBuilder to open the copied gallery folder.
- Go to the Publish panel and click 'Save'. To avoid overwriting your existing HTML, enter a different name as the Index Page Name.
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 French.
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"
Juicebox-Pro requires the following items:
"Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|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"
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.
Note you need both an MP3 and an OGG version of the audio file. The OGG file is required for playback in Firefox. To convert an MP3 into an OGG file, you can use an online convertor or a desktop audio application such as Audacity.
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:
- Add a logo as a watermark over the main image using JuiceboxBuilder-Pro.
- Add a logo as the background image of the gallery via the Background Image options. Set the
BackgroundURLoption to point to your logo image. Set
- 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
galleryTitlePositionto 'TOP'. Logos added in this way should be less than 50 px tall.
- Add a logo in the HTML page that embeds your gallery.