no matter what I do I can not loose the white space that appears below the gallery
Depending on the height of your browser window, your gallery may have a different aspect ratio to that of your images.
When the image is scaled to fit within the gallery's image area, there may be space surrounding the image and because your gallery uses imageVAlign="TOP" (vertically aligning the main images to the top of the image area), all the space is pushed to below the main images.
You could perhaps set imageVAlign="CENTER" to balance the space between the top and bottom of your main image.
However, the ideal solution that you seem to be looking for is for the gallery's aspect ratio to remain constant no matter what the size or shape of the user's browser window is.
This can be achieved by implementing a solution such as the following.
To see the example in action, create a test gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
body, html {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var galleryWidth = parseInt(windowWidth * 0.8);
var galleryHeight = parseInt(galleryWidth / 2);
$('#wrap').width(galleryWidth);
$('#wrap').height(galleryHeight);
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
new juicebox({
containerId: 'juicebox-container'
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio in the above example is 2:1 (set by the '2' in the line var galleryHeight = parseInt(galleryWidth / 2);).
Again, you can change this to whatever you like.
Hopefully you will be able to implement this within your own web page.
Also I posted recently about the gallery swiping on an ipad, is there some tweeking to the code that would prevent the sliding kicking in as I just want it to fade not be user interactive?
No. In Touch Input Mode, Juicebox automatically (and always) uses a slide image transition. This cannot be changed. Please see my reply to your query in this forum thread.
