Embedding in a HTML Page

Add a Juicebox gallery to a web page by adding a JavaScript code snippet into the page's HTML code.

To embed your gallery in an existing HTML page:

  1. Use JuiceboxBuilder to create your Juicebox gallery.
  2. Copy the entire contents of your Juicebox gallery folder into the folder that contains your HTML page.
  3. In JuiceboxBuilder, go to the Publish panel and copy the provided Embed Code. The embed code will look something like this: 
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
    containerId : "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "100%",
    backgroundColor: "#222222"
    });
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
  4. Paste the provided code into the body of the HTML page where you want to the gallery to appear.
  5. Load the HTML page in a browser to preview your gallery.

Embed Code Options

You can set configuration options directly in the embed code by adding them as parameters to the juicebox() function call. For example, to set the background color to pink, add a backgroundColor parameter like this:

new juicebox({
backgroundColor: "#FF00FF"
});

Options that are not set will take their default value as described in the Config Options list.

Embed Sizes

A Juicebox gallery can be embedded as Full Browser or Embedded.

  • Full Browser means the gallery fills 100% of the browser window.
  • Embedded means the gallery is a fixed size element in a bigger HTML page (e.g. a small gallery in a blog). Embedded galleries display the Expand button which allows the user to expand the gallery to fill the browser window and display the images at higher resolution.

Using Percentage Heights

When setting Juicebox's height to a percentage value, it may be necessary to explicitly set the height of it's parent divs via inline CSS. This is due to inconsistencies in how different browsers report div sizes. For example: if you place the 'juicebox-container' div inside a parent div called juicebox-parent and want the 'juicebox-parent' div to have a height of 50%, you should add the height as inline CSS like this: 

<div id="juicebox-parent" style="height: 50%;">
     <div id="juicebox-container"></div>
  </div>

HTML Doctype

Juicebox requires the embeding page to specify a valid doctype. The doctype is the first element in any valid HTML document and instructs the browser which version of HTML is being using. Internet Explorer 9 specifically will encounter rendering issues if the doctype is not specified. Read more about doctypes. We recommend using the HTML5 doctype like this:

<!DOCTYPE html>

Using an External jbcore Folder

The jbcore folder contains all the core files required by the Juicebox gallery. Usually it is placed inside each gallery folder. If you would like to share the jbcore folder between multiple galleries, you can move it to an external folder. To do this, update the Juicebox JavaScript import src path to point to the juicebox.js file in the new jbcore folder location. Note that the jbcore folder must remain intact and the juicebox.js file must remain in the jbcorefolder.

<!--START JUICEBOX EMBED-->
<script src="my_jbcore_folder/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : 'juicebox-container'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Embedding Multiple Galleries

To add multiple Juicebox galleries to your site, first create a separate gallery folder for each gallery you require.

Multiple Galleries on Separate HTML Pages

To create multiple Juicebox galleries, create a separate gallery folder for each gallery. Create your individual galleries as normal. You can now create a menu page that links to the index.html page in each gallery folder. We recommend that you keep the embedding HTML page in the same folder as the rest of the gallery assets (the gallery folder). This avoids many common pathing issues.

Multiple Galleries on One HTML Page

You can also embed 2 galleries on one HTML page. To do this we recommend you create a separate gallery folder for each gallery, then use the baseUrl embedding method described above to embed your galleries in the target page. Make sure the containerId parameter of each gallery matches the id of the div you want to load the gallery into.

Using a Resizable Gallery with a Header

Sometimes it is useful to have a HTML header or footer and have Juicebox resize to fill the remaining browser window. In this case we can use JavaScript to dynamically resize the gallery when the browser is resized. In the examples below we use the jQuery JavaScript library to do this.

Embedding Using Dreamweaver

You can use Adobe Dreamweaver to embed a Juicebox gallery using the same method as described above. Paste the embed code into the Code View of the HTML page you are emedig into. Note that the Juicebox gallery will not show in Dreamweaver's design preview. To view your gallery, view the HTML page in a browser.

Embedding in a Joomla Site

To embed a Juicebox gallery into a site built with the Joomla v2.5.4, do the following:

  1. Create a gallery using JuiceboxBuilder.
  2. Upload the entire gallery folder to your webserver via FTP.
  3. Create a new Article and click the 'HTML' button on the toolbar
  4. Paste the embed code generated by JuiceboxBuilder.
  5. Use the baseUrl option to point to the absolute URL of the gallery folder you uploaded in step 2, as described above.
  6. Click the 'Save' button.

You may need to do the following (once only) in order to allow <script> tags to be accepted.

  1. Go to 'Administration -> Extensions -> Plugin Manager'
  2. Select 'Editor - TinyMCE'
  3. In the 'Basic Options' panel, remove 'script' from the list of 'Prohibited Elements' and click the 'Save' button.

Embedding in a Drupal Site

To embed a Juicebox gallery into a site built with the Drupal v7.12, do the following:

  1. Create a gallery using JuiceboxBuilder.
  2. Upload the entire gallery folder to your webserver via FTP.
  3. Create a new Article and select 'Full HTML' from the 'Text Format' drop-down menu
  4. Paste the embed code generated by JuiceboxBuilder.
  5. Use the baseUrl option within the embed code to point to the absolute URL of the gallery folder you uploaded in step 2, as described above.
  6. Click the 'Save' button.

Embedding in a Web Template Site

If you use a Web Template Site which does not allow you to upload your gallery folder to the web space that they provide (such as Website Baker, Website Builder, Weebly, Wix or Yola), then an alternative solution would be to host your gallery with Dropbox and embed your gallery using an iframe following these instructions:

  1. Create a gallery using JuiceboxBuilder-Lite or JuiceboxBuilder-Pro.
  2. Download and install the Dropbox client program from here.
  3. Run the install program and sign up for a free Dropbox account.
  4. Drag and drop the entire gallery folder (not just the contents) into the 'Public' folder within the newly created Dropbox folder on your computer.
  5. Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'.
  6. Embed the gallery by inserting an iframe into your web page whose 'src' attribute points towards the 'index.html' page within the gallery folder (the URL you copied in Step #5 above). The iframe would look like the following: 
    <iframe src="Dropbox_URL_Goes_Here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Please note that if your Dropbox account was created after 4 October 2012, you will need to manually create a 'Public' folder on your account by following the 'Creating a Public folder' instructions on this web page.

Embedding with iWeb

To embed a Juicebox gallery into a website built with Apple's iWeb, do the following:

  1. Create a gallery using JuiceboxBuilder.
  2. Upload the entire gallery folder to your webserver using an FTP program.
  3. In iWeb create a new page. From the Widgets menu, select 'HTML Snippet'.
  4. In the HTM Snippet popup window, paste the embed code generated by JuiceboxBuilder.
  5. Use the baseUrl option within the embed code to point to the absolute URL of the gallery folder you uploaded in step 2, as described above.
  6. Click the 'Apply' button and 'Save' and 'Publish' your document.

Embedding with Adobe Muse

To embed a Juicebox gallery into a website built with Adobe Muse, do the following:

  1. Create a gallery with JuiceboxBuilder-Lite or JuiceboxBuidler-Pro.
  2. In Muse, select the page you wish to embed the SimpleViewer gallery into and go to the Design tab.
  3. Go to 'Object -> Insert HTML...' and paste the baseUrl embedding code found here, changing the 2 instances of 'my_gallery_folder/' to the name of your own gallery folder.
  4. To set the width of the gallery, change the width of the HTML frame within Muse as appropriate.
  5. To set the height of the gallery, make sure that your gallery's embedding code has a line such as galleryHeight : '600' using an appropriate absolute pixel value.
  6. Upload your Muse site using the 'File -> Upload to FTP Host...' option.
  7. Upload your Juicebox gallery folder (using a separate FTP program) to your root Muse website directory.

Troubleshooting Pathing Problems

Most errors when embedding Juicebox arise from incorrectly specified paths to the assets required by Juicebox (either the XML file or the images and thumbnails).

  • Check your image paths and filenames exactly match the names specified in the config file.
  • Most web servers are Case Sensitive. This means the letter cases in the filename must exactly match those in the XML document (for example ".jpg" is not the same as ".JPG").
  • Relative paths are relative to the HTML document that embeds the Juicebox gallery.
  • Use forward slashes (/) not back slashes when specifying paths.
  • A URL beginning with a forward slash is relative to the root of the website. A URL without a leading slash is relative to the current folder.