You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Gallery in reverse order
If I understand well the images in the gallery must keep the same number for SEO reasons.
But I want to show the newest images first.
Till now I add an image ang put it on number 1.
But SEO wise that is not oke.
So if there is a possibility to show the gallery in revers order that would solve my problem I think.
Example :
http://www.kunst-van-petra.nl/beelden/beelden-steen/
Kind regards
Cees van Stam
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.
Thanks for comprehensive answer. Start testing this all in a test environment. I think my IT skills are not quite optimal.
So anyway just as a question.
If I add an image at the end and I change First image index by General to this last image number has this implications for SEO.
Anyway, the gallery start with the last image added.
This would be a solution for me now without adjustments possible errors occurring in the website.
If I add an image at the end and I change First image index by General to this last image number has this implications for SEO.
Anyway, the gallery start with the last image added.
I'm not quite sure what you mean.
In the second suggestion I posted above, I use firstImageIndex to initially display a specified image in the gallery. The code that feeds the 'index' to firstImageIndex essentially reverses the image numbers so, in a gallery of 12 images (for example) a ?image=1 query string will result in a firstImageIndex of 12 which will display the last image in the gallery. If you then add images to the beginning of your gallery, ?image=1 will still refer to the last image in the gallery which will not have changed and this should be fine for SEO.
If you were to use my second suggestions above and add an image to the end of your gallery, then ?image=1 will then refer to the new image and will break the SEO consistency.
I hope that my suggestions above help but please note that, although the code has been tested for functionality, it has not actually been tested with regard to SEO.
Juicebox Support Forum → Juicebox-Pro Support → Gallery in reverse order
Powered by PunBB, supported by Informer Technologies, Inc.