Topic: having two juicebox galleries on one site

Hi guys, first of all I love your software.

I have a couple of questions.

1) I have a website where I am doing a photo gallery on one page and also a slider feature on the index page (like you see on many sites).  Is there a way to have two different juicebox layouts on the same website?  They would be two very different looks so I can't use the same configurations for both.

2) Is there a way to add the juicebox gallery in to a CSS background div?  I would like to have a "flash" or "slider" player look underneath some text so any information you can point me to on this would be great.

Thank you, Brady

Re: having two juicebox galleries on one site

Is there a way to have two different juicebox layouts on the same website?

Yes. Please see the Embedding Multiple Galleries support section for details on embedding multiple galleries on separate HTML pages or on one HTML page. (Each gallery can have a unique layout.)

Is there a way to add the juicebox gallery in to a CSS background div?

You would just need to embed a gallery into a web page as normal (following the instructions here) and overlay whatever content you like on top of the gallery using CSS (to position the custom content and stack it on top of the gallery using a high enough z-index).
Please note that Juicebox was not designed with this in mind so you might run into problems that need to be tackled as you encounter them.
However, something like the following might work. To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just add a few images, don't worry about the configuration options) and use the following as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #wrap {
        position: relative;
    }
    #juicebox-container {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 600px;
        height: 400px;
        z-index: 9999;
        color: #ff0000;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '600',
        galleryHeight: '400',
        autoPlayOnLoad: 'TRUE',
        buttonBarPosition: 'NONE',
        enableLooping: 'TRUE',
        screenMode: 'LARGE',
        showAutoPlayStatus: 'FALSE',
        showImageNav: 'NEVER',
        showImageOverlay: 'NEVER',
        showThumbsOnLoad: 'FALSE'
    });
    </script>
    <div id="wrap">
        <div id="juicebox-container"></div>
        <div id="overlay">Custom content goes here.</div>
    </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>