Try the following as your gallery's 'index.html' page.
In a gallery with 12 images, the URL: index.html?id=12 will display the first image, index.html?id=11 will display the second image, etc. and index.html?id=1 will display the last image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var jb, imageCount;
$(document).ready(function () {
jb = new juicebox({
containerId : 'juicebox-container'
});
jb.onInitComplete = function() {
imageCount = jb.getImageCount();
if (location.search) {
var queryString = unescape(location.search), queryArray = {}, re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g"), queryComponent, queryInteger;
while (queryComponent = re.exec(queryString)) {
queryArray[queryComponent[1]] = queryComponent[2];
}
queryInteger = parseInt(queryArray["id"]);
if (!isNaN(queryInteger) && queryInteger > 0 && queryInteger <= imageCount) {
jb.showImage(imageCount - queryInteger + 1);
}
}
};
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>