The Embedding Multiple Galleries examples rely on duplicating a template page for each gallery (and embedding a different gallery on each page).
An alternative solution would be to embed each gallery on demand within a single web page.
Try the following.
Create two galleries and name the gallery folders 'gallery1' and 'gallery2'.
Create a HTML file with the code below, put the file in the same directory as your two gallery folders and open it in a browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding-top: 10px;
text-align: center;
width: 100%;
}
#header a {
color: #666666;
text-decoration: none;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
// Function to resize gallery
function doLayout() {
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
var headerHeight = $('#header').outerHeight();
var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
$('#wrap').height(galleryHeight);
}
// Function to load selected gallery on demand using baseUrl
function loadGallery(base) {
new juicebox({
containerId: 'juicebox-container',
baseUrl: base
});
}
// Run following code when page is initially loaded
$(document).ready(function () {
// Run function to resize gallery
doLayout();
// Ensure function to resize gallery is run when browser window size changes
$(window).bind('resize', doLayout);
// Run function to load Gallery #1
loadGallery('gallery1/');
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
<span> </span>
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>You could hopefully adapt the code above to work within your own scenario.
You could add as many galleries as you like and replace the header container with your own top menu.