Topic: Linking together multiple galleries
With Juicebox, you are able to create as many individual galleries as you like but if you want to link them together, you would normally need to do so manually following the online examples in the Embedding Multiple Galleries support section.
Otherwise, for an automated solution, you could use Showkase (a PHP web application) to create a complete portfolio website online, integrating as many Juicebox galleries as you like (all indexed on gallery index pages) without the need for any manual coding at all.
However, for a quick and easy way to link together a few Juicebox galleries, you might like to try this method.
(1) Create your Juicebox galleries as normal (with JuiceboxBuilder, for example) and name the gallery folders 'gallery1', 'gallery2', etc. (This naming convention is important for this method to work.)
(2) Use the code below to create an HTML file, put the file in the same directory as the gallery folders and open the HTML file in a browser.
That's it. The file will initially load the first gallery ('gallery1') and will provide links to all Juicebox galleries.
You can edit the HTML code (to change the page header, colors, etc.) in a plain text editor if you like.
This is not intended to be anything like a replacement for Showkase (which is a fully-featured website creation tool with full support for creating Juicebox-Pro galleries within its interface).
It is just a quick and easy way to display a few already-made Juicebox galleries.
I hope it helps someone!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#page {
font-size: 30px;
}
#menu {
padding: 10px 40px 0px 40px;
}
#footer {
background-color: #222222;
bottom: 0px;
color: #666666;
font-family: sans-serif;
font-size: 20px;
left: 0px;
position: relative;
text-align: center;
width: 100%;
}
#wrap {
margin: 0 auto;
width: 80%;
}
.gallery {
cursor: pointer;
}
.gallery.selected {
text-decoration: underline;
}
span.gallery:hover {
color: #888888;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<title></title>
</head>
<body>
<div id="header">
<div id="page"></div>
<div id="menu"></div>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
<div id="footer">
<div id="description"></div>
</div>
<script type="text/javascript">
// Enter Page Title here
var page = "Multiple Galleries";
// Initialize Juicebox object variable name
var jb;
// Function to process all galleries
function doProcess(counter, gallery) {
$.get('gallery' + counter + '/config.xml', function(data) {
// Build gallery folder name
var base = 'gallery' + counter;
// Create space between links
if (counter > 1) {
$('#menu').append($('<span />').html(' '));
}
// Fetch Gallery Title from gallery XML file
var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';
// Fetch Gallery Description from gallery XML file
var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';
// Add link to Document Object Model
$('#menu').append($('<span />').attr('id', base).addClass('gallery').data('description', description).html(title));
// Initially load gallery
if (counter === gallery) {
loadGallery(base, description);
}
}).done(function() {
// Process next gallery
doProcess(++counter, gallery);
}).fail(function() {
// Show header and footer when all galleries have been processed
$('#header, #footer').css('visibility', 'visible');
// Layout page and resize gallery
doLayout();
});
}
// Function to layout page and resize gallery
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
var headerHeight = parseInt($('#header').outerHeight(true), 10);
var footerHeight = parseInt($('#footer').outerHeight(true), 10);
var galleryHeight = windowHeight - headerHeight - footerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
window.setTimeout(function() {
jb.setGallerySize(galleryWidth, galleryHeight);
}, 500);
}
}
// Function to load gallery, underline selected link and show Gallery Description in page footer
function loadGallery(base, description) {
// Load gallery
jb = new juicebox({
backgroundColor: "#222222",
baseUrl: base + "/",
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%"
});
// Style selected link
$('.gallery').removeClass('selected');
$('#' + base).addClass('selected');
// Show Gallery Description in page footer
$('#description').css('padding', description ? '10px 40px' : '0px').html(description);
}
// Show Page Title in browser tab
document.title = page;
// Check if jQuery is loaded
if (typeof jQuery === 'undefined') {
// Show Page Title in page header
document.getElementById('page').innerHTML = page;
// Show message if no galleries found
document.getElementById('menu').innerHTML = '<span>No galleries found.</span>';
} else {
// Run following when Document Object Model is complete
$(document).ready(function() {
// Register resize handler to run doLayout function when browser window is resized
$(window).resize(doLayout);
// Register click handler to run loadGallery and doLayout functions when link is clicked
$('#menu').on('click', '.gallery', function() {
var base = $(this).attr('id');
var description = $(this).data('description');
loadGallery(base, description);
doLayout();
});
// Show Page Title in page header
$('#page').html(page);
// Hide header and footer until all galleries have been processed
$('#header, #footer').css('visibility', 'hidden');
// Fetch gallery id from query string
var gallery = 1;
var term = 'gallery';
if (window.location.search) {
var queryArray = {};
var queryComponent;
var queryString = unescape(window.location.search);
var re = new RegExp('([^?=&]+)(?:=([^&]*))?', 'g');
while (queryComponent = re.exec(queryString)) {
queryArray[queryComponent[1]] = queryComponent[2];
}
var queryInteger = parseInt(queryArray[term], 10);
if (!isNaN(queryInteger)) {
gallery = Math.abs(queryInteger);
}
}
// Process all galleries
doProcess(1, gallery);
});
}
</script>
</body>
</html>