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% x 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 its 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>

HTML Viewport Tag

We recommend setting the HTML page Viewport tag as follows. This will lock the scale of the page on mobile devices. Other viewport tags are supported. See here for details.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

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 jbcore folder.

<!--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

Juicebox allows you to add an unlimited number of galleries to your website. Navigation between multiple galleries is handled by the embedding website. Another option is to use Showkase, our complete portfolio website creation tool which supports creating multiple Juicebox 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.

Switching between Multiple Galleries using JavaScript

To switch between multiple galleries with JavaScript, create a separate gallery folder for each gallery. You can now switch between these galleries by dynamically setting the baseURL with JavaScript.

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 embedding 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 Joomla v3.3, do the following:

  1. Create a gallery using JuiceboxBuilder.
  2. Upload the entire gallery folder to your web server 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 Drupal, use the Drupal Juicebox Module or embed manually with the following steps:

  1. Create a gallery using JuiceboxBuilder.
  2. Upload the entire gallery folder to your web server 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 (such as Moonfruit, Website Baker, Website Builder, Weebly, Wix or Yola) which does not allow you to upload your gallery folder to the web space that they provide, then you will need to host your gallery elsewhere and load it into an iframe on your web page. As it is no longer possible to host web pages with file sharing services Dropbox and Google Drive, it would be best to use a regular web host with FTP support.

  1. Sign up for some web space with a regular web host. Juicebox galleries do not require any special server requirements (please see here for details) so a free hosting account may be suitable (although a paid account should give greater stability and better support).
  2. Create a Juicebox gallery using JuiceboxBuilder.
  3. Upload the complete gallery folder to your web space using an FTP program such as Filezilla. Your web host should be able to help you with this if necessary.
  4. Add an iframe to the web page in your Web Template Site, loading the gallery's 'index.html' file. For example: 
    <iframe src="https://www.example.com/gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

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 JuiceboxBuilder-Pro.
  2. In Muse, select the page you wish to embed the Juicebox 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.