Just a few quick notes to clarify things that you seems to have solved.
I would like to keep it limited to a single username and only allow the user to change the tags.
Just hardcode the flickrUserName (or flickrUserId) in the gallery's configuration options.
is it possible to allow a "maximize" but still have a header?
No. When expanding a gallery via the Expand Button, only the gallery (and no other elements on the page into which the gallery is embedded) is expanded. I'm glad you are happy with the F11 solution.
anyone see a feasible way to show tags of the current image grabbed from Flickr?
The first challenge is to get the Flickr photoId of the currently-displayed image in the gallery.
The only way I can see to do this is to extract it from the URL (generated dynamically to display the image) using the Juicebox-Pro API and jQuery (and knowledge of how Juicebox constructs the dynamically-generated code and what CSS classes it uses).
The next step would be to use the Flickr API (specifically the flickr.tags.getListPhoto method) to fetch the tags of the image.
Below is an example which displays a comma-separated list of Flickr tags for the currently-displayed image in a container below the gallery. You will need to enter your own Flickr User Name and API Key where noted in the code (replacing {your_flickr_user_name} and {your_flickr_api_key}). You will also need to include jQuery in your web page.
You can modify this to suit your own needs as necessary. I hope this helps.
<!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" src="jquery/jquery-1.11.3.min.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
// Enter your own Flickr User Name in the line below
flickrUserName: "{your_flickr_user_name}",
galleryHeight: "400",
galleryWidth: "600",
useFlickr: "TRUE"
});
jb.onImageChange = function(e) {
// 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 in output container
$("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');
}).fail(function() {
// Fail message
$("#output").html('<p>Cannot find tags.</p>');
});
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
<div id="output"></div>
</body>
</html>