Unfortunately, Juicebox-Pro was not designed with the intention that users could access and use internal classes so what you are doing is not officially supported. It just happens to be the only way I could think of for you to achieve your goal.
It looks like the onImageChange() function (which signifies that a new image has been selected) does not wait for the container with class .jb-dt-main-image-0 to be present in the DOM before being fired and so the only solution I was able to come up with was a short delay. As the delay seems to be necessary only for the very first image in the gallery, you could perhaps change the code so that the delay is used only once, when the gallery is loaded.
// Initialize counter
var counter = 0;
jb.onImageChange = function(e) {
// Set delay only on first image change
var delay = counter === 0 ? 200 : 0;
// Introduce short delay to ensure required class is present in Document Object Model
window.setTimeout(function() {
// The internal image index used for dynamically-generated classes starts at zero so subtract 1 from public image index
var index = e.id - 1;
// Form CSS class for currently-displayed image
var element = '.jb-dt-main-image-' + index;
// Get URL of currently-displayed image from src attribute of <img> tag
var src = $(element).find('img').first().attr('src');
// Extract Flickr photoId from URL
var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));
// Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
// Enter your own Flickr API Key in the line below
$.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {
// Initialize tags array
var tags = [];
// Iterate over all tags
$.each(json.photo.tags.tag, function(i, data) {
// Add new tag to array
tags.push(data.raw);
});
// Display tags array in output container
$("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');
}).fail(function() {
// Fail message
$("#output").html('<p>Cannot find tags.</p>');
});
}, delay);
// Increment counter
counter++;
};Edit:
On further investigation, it looks like the Juicebox-Pro API method getImageInfo() returns the thumbURL successfully (but not the imageURL) so you should be able to extract the Flickr photoId from the thumbURL as follows. This avoids the need for any delay at all.
jb.onImageChange = function(e) {
// Get image info for current image
var info = jb.getImageInfo(e.id);
// Get thumbURL for current image
var src = info.thumbURL;
// Extract Flickr photoId from thumbURL
var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));
// Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
// Enter your own Flickr API Key in the line below
$.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {
// Initialize tags array
var tags = [];
// Iterate over all tags
$.each(json.photo.tags.tag, function(i, data) {
// Add new tag to array
tags.push(data.raw);
});
// Display tags array in output container
$("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');
}).fail(function() {
// Fail message
$("#output").html('<p>Cannot find tags.</p>');
});
};I have logged a bug report with the developers regarding the inability to fetch the imageURL from the getImageInfo() method when using Flickr as a source of images.