You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Gallery Height
Hi,
I have a gallery in a test page here:
http://www.artwebs.co.uk/colStonewareBrick.asp
Is it possible to adjust the gallery height for smaller browsers: Under 480px and especially phones (cells) the space above and below the main image is unacceptable large.
Cheers,
Seb
Under 480px and especially phones (cells) the space above and below the main image is unacceptable large.
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
If you want to have two different sets of gallery dimensions (depending on the height of the user's browser window), then you could use something like the following.
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var galleryHeightLarge = 800;
var galleryHeightSmall = 400;
var galleryWidthLarge = 600;
var galleryWidthSmall = 300;
var size;
var thresholdHeight = 480;
var tracker = false;
function changeSize(a, b) {
window.setTimeout(function() {
jb.setGallerySize(a, b);
}, 200);
tracker = true;
}
function checkSize() {
var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
if (windowHeight < thresholdHeight && (size === 'LARGE' || tracker === false)) {
changeSize(galleryWidthSmall, galleryHeightSmall);
size = 'SMALL';
}
if (windowHeight >= thresholdHeight && (size === 'SMALL' || tracker === false)) {
changeSize(galleryWidthLarge, galleryHeightLarge);
size = 'LARGE';
}
}
var jb = new juicebox({
containerId: "juicebox-container"
});
$(document).ready(function() {
checkSize();
$(window).resize(checkSize);
});
</script>This code checks the browser window's height, initially displays the gallery as appropriate and if the browser window's height changes and crosses a specified threshold height, the gallery's dimensions will change (using the Juicebox-Pro API method setGallerySize()).
Juicebox-Pro was not designed with this in mind (two different sets of gallery dimensions) so a short delay (the setTimout() value of 200ms) is required before calling setGallerySize() to ensure that this works OK.
I hope this helps.
Hi Steven,
As I can't read JavaScript, I'm guessing that I put your script under the
<script src="colStonewareBrick/jbcore/juicebox.js"></script>
in the head of the page. This, however just brings back a grey area saying that the config file cannot be found. What do I do?
Thanks for your help.
Seb
If you are trying to incorporate your own original functionality (switching between different galleries with different heights) and functionality from your forum thread here (to allow different thumbnails configurations depending on the width of the browser window) and also this functionality (changing the height of the galleries depending on the height of the browser window), then things are starting to get really complicated. There is the added complication that setGallerySize() accepts only fixed pixel values and does not accept percentages so you might want to reload the selected gallery with new dimensions (rather than use setGallerySize()) if you want to retain gallery widths of 100%.
Assuming you want both your galleries to be the same size as each other (which is not currently the case) but want their heights to change when a threshold height is crossed, then try replacing:
<script>
$(document).ready(function() {
//load gallery 1
loadGallery('colStonewareBrickSets/', '650px');
//initialize top buttons
$("#button-1").on("click", function(){loadGallery('colStonewareBrick/', '500px');});
$("#button-2").on("click", function(){loadGallery('colStonewareBrickSets/', '650px');});
});
function loadGallery(base, height) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container',
backgroundColor: 'fff',
galleryWidth: '100%',
galleryHeight: height
});
}
</script>... with:
<script type="text/javascript">
var jb;
var a, b, c; // maxThumbColumbs, maxThumbRows, thumbsPosition
var y = 'colStonewareBrickSets/'; // Initial baseUrl
var z; // galleryHeight
var galleryHeightLarge = '800';
var galleryHeightSmall = '400';
var size;
var thresholdHeight = 480;
var thresholdWidth = 700;
var tracker = false;
function loadGallery(a, b, c, y, z) {
jb = new juicebox({
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
galleryWidth: '100%',
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}
function initialLoad() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
if (windowWidth < thresholdWidth) {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
} else {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
}
if (windowHeight < thresholdHeight) {
size = "SMALL";
z = galleryHeightSmall; // galleryHeight
} else {
size = "LARGE";
z = galleryHeightLarge; // galleryHeight
}
loadGallery(a, b, c, y, z);
}
function checkSize() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
if (windowWidth < thresholdWidth && c === 'LEFT') {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
if (windowWidth >= thresholdWidth && c === 'BOTTOM') {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
if (windowHeight < thresholdHeight && size === 'LARGE') {
z = galleryHeightSmall;
size = 'SMALL';
loadGallery(a, b, c, y, z);
}
if (windowHeight >= thresholdHeight && size === 'SMALL') {
z = galleryHeightLarge;
size = 'LARGE';
loadGallery(a, b, c, y, z);
}
}
$(document).ready(function() {
initialLoad();
$(window).resize(checkSize);
$("#button-1").click(function() {
y = 'colStonewareBrick/'; // baseUrl
loadGallery(a, b, c, y, z);
});
$("#button-2").click(function() {
y = 'colStonewareBrickSets/'; // baseUrl
loadGallery(a, b, c, y, z);
});
});
</script>If you want to do things that Juicebox-Pro was not designed to do (and perhaps make use of the Juicebox-Pro API for certain things, too), then I would certainly recommend taking a look at learning JavaScript. It's really the only way to achieve the things you are asking.
There's a good guide to JavaScript on the Mozilla Developer Network here.
I hope this points you in the right direction.
Incidentally, you could ensure that your galleries are responsive (please see this forum post for details) but this would mean that you would essentially have no control over the shape or size of your gallery (it would be entirely dependent on the shape and size of the user's browser window) and there may very well be gaps above and below (or to the left and right of) the main images in the gallery.
Having two fixed heights (like in the code above) which work well for the most popular browser window shapes and sizes of your target audience might be the best compromise.
Hi Steven,
Thank you so much for your help with this and my other current topic. I've tried it and it works - just need to tweak bits to get it to look good in the page.
Yes, I really need to learn JavaScript!
Seb
You're welcome!
I'm glad you're making progress.
Juicebox Support Forum → Juicebox-Pro Support → Gallery Height
Powered by PunBB, supported by Informer Technologies, Inc.