Every now and then it will not let me swipe on a picture.
I do not know what might be causing this (the ability to swipe to navigate should obviously be consistent across all images).
Just a thought but maybe the controls on the image overlay (or perhaps even the image overlay itself) is somehow interfering with the swipe gesture.
Try setting showImageOverlay="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to see if this makes a difference. If it helps, then you could maybe disable the autohide for the image overlay by setting inactivityTimeout="0" ('Customize -> Main Image') or allow the user to toggle the overlay on or off using the Info Button by setting showInfoButton="TRUE" ('Customize -> Button Bar').
However, whenever I first load the page, for whatever reason, they are not getting loaded.
onImageChange() is fired for the first image in the gallery but the initial search for the '.jb-dt-main-image-0' class might be happening before the element is present in the Document Object Model (DOM). Introducing a short delay (with setTimeout()) before searching for the '.jb-dt-main-image-0' class should work.
Try the following (which introduces a 100ms delay):
jb.onImageChange = function(e) {
// 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>');
});
}, 100);
};On another un-related to Juicebox note, do you have any experience in generating the auth_token and api_sig for Flickr's api with their oAuth in javascript?
No, sorry. However, I found the following quote on this Flickr help page: https://www.flickr.com/services/api/auth.spec.html
Authentication tokens can be set to expire by the user when they authenticate against the application. This is an advanced feature, hidden by default. Options are 1 hour and never. This may be set for different applications by policy in the future.
I hope this points you in the right direction.
These pages might also help:
User Authentication - https://www.flickr.com/services/api/auth.oauth.html
JavaScript Libraries for OAuth - http://oauth.net/code/ (scroll down to JavaScript section)