Unfortunately, there is no built-in functionality to allow Juicebox to display the images in a gallery in reverse.
If you were to add new images to the end of your gallery, then the existing images would retain their direct link index numbers and the new images at the end of the gallery would be assigned new (higher) numbers.
If you were to add new images to the beginning of your gallery but then reverse the order in which the images are displayed, then this would essentially have the same effect as above.
If you added new images to the end of your gallery and reversed the image order, then images would not retain permanent unique direct image index numbers. Each time you add a new image to the end of your gallery, then, when the images are reversed, the new image would have index 1 (and all others would be shifted along).
The only real solution would be to add new images to the end of your gallery and keep the image order as normal.
However, you might be able to use one (or both) of the scripts below.
If you wanted to dynamically reverse the order of images, add a configURL: 'config.php' entry in your gallery's embedding code and use the following code as a file named 'config.php' in your gallery folder.
<?php
header('Content-Type: application/xml');
$xml = simplexml_load_file('config.xml');
$arr = array();
foreach ($xml->image as $img) {
$arr[] = $img;
}
$arr = array_reverse($arr);
$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;
$settings_tag = $dom_doc->createElement('juiceboxgallery');
foreach ($xml->attributes() as $key=>$value) {
$settings_tag->setAttribute($key, $value);
}
foreach ($arr as $img) {
$image_element = $dom_doc->createElement('image');
foreach ($img->attributes() as $key=>$value) {
$image_element->setAttribute($key, $value);
}
$title_element = $dom_doc->createElement('title');
$title_text = $dom_doc->createCDATASection($img->title);
$title_element->appendChild($title_text);
$image_element->appendChild($title_element);
$caption_element = $dom_doc->createElement('caption');
$caption_text = $dom_doc->createCDATASection($img->caption);
$caption_element->appendChild($caption_text);
$image_element->appendChild($caption_element);
$settings_tag->appendChild($image_element);
}
$dom_doc->appendChild($settings_tag);
echo $dom_doc->saveXML();
?>
Otherwise, you could try to override Juicebox's own direct link functionality and assign new direct link index numbers to each image in reverse so that image #1 always refers to the last image in the gallery. That way, you could add images to the beginning of your gallery without affecting the custom direct link image numbers for existing images.
First of all, you'd need to find a way to specify the image you want to load (via the URL).
Juicebox already internally uses the # identifier so you could perhaps use a query string instead. Something like: http://www.example.com/gallery/index.html?image=7
You'd then need to determine the number of images in the gallery. It would not be possible to use the Juicebox-Pro API getImageCount() method before the gallery is loaded so you'd need to use JavaScript to count the number of <image> entries in the gallery's 'config.xml' file.
Knowing the total number of images and the image number from the query string, you could then calculate the desired image (by essentially reversing the regular index numbers) and load it using the firstImageIndex configuration option in the gallery's embedding code.
Here's some sample code you could try.
To see it in action, just create a sample gallery with a few images in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function address(id, total, uri) {
var reverse = total - (id - 1);
var i = uri.indexOf('#');
var hash = i === -1 ? '' : uri.substr(i);
uri = i === -1 ? uri : uri.substr(0, i);
var re = new RegExp('([?&])' + term + '=.*?(&|$)', 'g');
var separator = uri.indexOf('?') !== -1 ? '&' : '?';
if (uri.match(re)) {
uri = uri.replace(re, '$1' + term + '=' + reverse + '$2');
} else {
uri = uri + separator + term + '=' + reverse;
}
var url = uri + hash;
window.history.replaceState('', '', url);
}
var image = 1;
var term = 'image';
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);
image = isNaN(queryInteger) ? 1 : queryInteger;
}
var total = 1;
$.get('config.xml', function(data) {
total = $(data).find('juiceboxgallery > image').length;
}).done(function() {
var max = Math.max(1, image);
var min = Math.min(total, max);
var index = min - 1;
var fii = total - index;
var jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii,
enableDirectlinks: 'FALSE'
});
address(fii, total, window.location.href);
jb.onInitComplete = function() {
jb.onImageChange = function(e) {
address(e.id, total, window.location.href);
};
};
}).fail(function() {
alert('Cannot fetch total number of images in gallery.');
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
Now, when you go to http://www.example.com/gallery/index.html?image=1, the last image in the gallery will be displayed.
If you were to go to http://www.example.com/gallery/index.html?image=2, the second last image in the gallery will be displayed (and so on).
If you were to add images to the beginning of your gallery, then the last image in the gallery will always have the identifier 'image=1'.
Please bear in mind that what you are looking to do is not something that Juicebox was designed to do (or something that can be achieved with the available configuration options) and making such custom modifications can often result in unforeseen problems and unwanted knock-on effects. However, I hope that my suggestions above help.
Also, please also note that this cannot be used in conjunction with Juicebox-Pro's social media sharing functionality which is tightly integrated with Juicebox's own direct link functionality.