So, is there no way to close an image that's opened from an expanded gallery while viewing from an ipad?
An image that's opened from an expanded gallery is simply an image displayed in a browser tab/window of its own.
The only way to close it would be to close the tab/window using the browser controls (as if it was a tab/window displaying any other web page).
If I could just tap to close the big image that was just opened that would be terrific
Instead of having the Open Image button display just the image in a new tab/window (which it does by default), you could display a simple web page (which could be generated dynamically from within gallery's 'index.html' page using JavaScript) which would display the image as a link to close the window.
First of all, you would need to set all the linkUrls in your gallery's XML file to point to a JavaScript function within the gallery's 'index.html' page (in this example named func()). You would also need to set all the linkTargets to '_self'.
For example:
<image imageURL="images/image.jpg" thumbURL="thumbs/thumb.jpg" linkURL="javascript: func();" linkTarget="_self">
The JavaScript function would determine the URL of the current image using the Juicebox-Pro API (specifically the getImageIndex() and getImageInfo() methods).
A new window with the required code could then be opened using JavaScript.
At its most basic, a gallery's HTML 'index.html' page might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
jb = new juicebox({
containerId : 'juicebox-container'
});
function func() {
var index = jb.getImageIndex(); // Get current image index
var info = jb.getImageInfo(index); // Get current image info
var url = info.imageURL; // Get current image URL
var win = window.open("", "_blank");
win.document.writeln("<html>");
win.document.writeln("<body>");
win.document.writeln("<a href='#' onclick='javascript: window.close(); return false;'>");
win.document.writeln("<img src='" + url + "' alt='Click to close' />");
win.document.writeln("</a>");
win.document.writeln("</body>");
win.document.writeln("</html>");
win.document.close();
}
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
You could configure the new window using the available window.open() configuration options.