You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Height and Width
I was testing and tried values in VW and VH instead of PX for GalleryWidth and GalleryHeight but it seems that Juicebox does not like that. It translates it straight into PX.
Is VW and VH not possible as sizing elements in Juicebox?
A Juicebox gallery's galleryWidth and galleryHeight can be either percentages or absolute pixel values only. Other units of size are not supported.
If a galleryWidth or galleryHeight ends with a percentage character ('%'), then the dimension will be a percentage (of the gallery's parent container). Otherwise, the galleryWidth or galleryHeight will be treated as a fixed pixel value. (Internally, any non-numeric characters will be truncated and 'px' will be appended.)
A Juicebox gallery's galleryWidth and galleryHeight can be either percentages or absolute pixel values only. Other units of size are not supported.
If a galleryWidth or galleryHeight ends with a percentage character ('%'), then the dimension will be a percentage (of the gallery's parent container). Otherwise, the galleryWidth or galleryHeight will be treated as a fixed pixel value. (Internally, any non-numeric characters will be truncated and 'px' will be appended.)
Hi Steven,
Thanks for your answer, I have to correct something. This is not correct:
If a galleryWidth or galleryHeight ends with a percentage character ('%'), then the dimension will be a percentage (of the gallery's parent container). This is not correct, it is the page height Juicebox is using as Galleryheight.
I have set the parent container in VW width:100VW, height:29VW (this is legitimate) and galleryWidth and galleryHeight both in 100%. The first div below the DIV with galleryWidth and galleryHeight does have width:900px (is correct, devicewidth = 900px) but height is set as 8723px. This is the total height of the page and is 5 DIV higher in rank
To be sure, I changed height of parent DIV in 29VH but still 8723px.
So my conclusion is that when Galleryheight is in percentage Juicebox is not using the parent container for calculating the height of jb-glry-id-0 but the page height and in my case this is 900px by 8723px. (element.style=height: 10163px;)
It could be that this is a feature but it isn't because you are writing about the parentcontainer, so it must be a bug in the calculation. Only when you set the galleryheight in PX the publishing of the gallery is correct, in my case
No problem, I can use Javascript for calculating the correct Galleryheight in PX. You have made once a nice script for this except it don't work for me. Juicebox is still looking for an higher DIV with an element.style=height:10163px
If you set a gallery's height to something like 50%, then the gallery's height should be 50% of it's parent container.
In the following example, the gallery's actual height will be 200px.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryHeight: "50%"
});
</script>
<div id="parent" style="height: 400px;">
<div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->
This seems to hold true (at least in the example above) for all percentages other than 100%.
If, in the example above, the gallery's height is set to 100%, then the gallery's actual height is, indeed, 100% of the page height rather than 100% of the parent container's height but only if there is no other content on the web page. If there is other content on the page, (try adding something like <div id="extra">Text</div> to the page) then the gallery's actual height is as expected (100% of the parent container = 400px).
I'm not sure if this is intentional or not but I'll let the developers know.
Thanks for pointing this out.
Hi Steven,
I have made a testpage, see https://www.delosgaia.nl/index_test.htm
Just open this page in any browser in a width larger then 910 px, check the section under div class="sidebox"><div id="header">
You will find the id="box_slideshow"
Then resize the browser below a width of 910 px and check this section again.
Compare the height of <div id= "jb-glry-id-1"......> with the height of <div class="liquid-slider"......>. They are equal.
On your test page, it's possible that you're running into the problem described in the 'Using percentage heights' note here.
(You are changing the gallery's parent container's height using JavaScript immediately before loading the gallery and the gallery has been assigned a galleryHeight of 100%.)
I notice that your gallery container comes before the embedding code on your web page.
Try moving your gallery container to after the embedding code on your web page.
My own tests suggest that this might make a difference (but, again, only for a galleryHeight of 100% - other percentages and fixed pixel values should not be affected).
I have notified the developers that, depending on the conditions, a galleryHeight of 100% can sometimes result in an unexpected height. (I have reported both anomalies: (1) a galleryHeight of 100% in a parent container of fixed height without other content on the page and (2) a galleryHeight of 100% in a parent container of fixed height with other content on the page and the gallery container before the embedding code.)
I realise that your test page was designed to show an issue (thank you for providing it) but if it was a problem that you could not overcome, then a solution might be to set your galleryHeight to be your own custom 'galleryHeight' JavaScript variable (which you already use to set the height for your 'header' <div>).
galleryHeight: galleryHeight,Alternatively, you can always set a gallery's dimensions after the gallery has loaded (for example when the browser window is resized) using the Juicebox-Pro API setGallerySize(width: int, height: int), method. Please note that this method accepts fixed pixel values only (not percentages).
Hi Steven,
Thanks for your reply, let me explain the design of the webpage and how I has done it in the past.
For body size larger then 910px I use a fixed layout in three steps. The same I did for body sizes below 910px but this going to change.
I want to change the behavior of the galleries by size below 910 px.
My layout for body sizes below 910 px is using the full width of the body and the galleries also has to go using the full body of device width. The galleries has to fully responsive and keeping the picture ratio. This by load and by resize of the browser width.
Galleries by browser width higher then 910px are working fine, I just set the galleryWidth and galleryHeight. So I started testing how to do this and has used one your example script.
if(browserWidth<910){
var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width());
var galleryWidth = parseInt(windowWidth);
var galleryHeight = parseInt(galleryWidth * .29);
$('#header').width(galleryWidth);
$('#header').height(galleryHeight);
new juicebox({baseUrl:'header/', themeURL:'https://data.delosgaia.nl/jquery/jbcore/delosgaia/theme.css',containerId: 'box_slideshow', galleryWidth:'100%', galleryHeight: '99%',backgroundColor: 'transparent', buttonBarIconSize: '15', navButtonIconSize: '15'});The problem with the galleryHeight is something I have noticed in the beginning of Juicebox but find I way around it by using browserWidth section but this is ugly.
I am going to test the JuiceBox API for setting a Gallery height and width. I keep you posted about the result
Hi Steven,
I have add the setGallerySize( width: int, height: int ). I get an error message:
Uncaughty type error: Cannot read property 'position'of null
at set_containers_size_and_position (eval at <anonymous> (juicebox.js:14), <anonymous>:1:290533)
at repaint (eval at <anonymous> (juicebox.js:14), <anonymous>:1:226204)
At object.glryRepaint (eval at <anonymous> juicebox.js:14>, <anonymopus>:1:226204)
at Object.setGallerySize (eval at <anonymous> (juicebox.js:14), <anonymous>:1:293212)
at index_test.htm:333
at dispatch (jquery.min.js:3)
at q.handle (jquery.min.js:3)It is working but ruined the resize of my liquidslider app until I do an F5 in my browser. Please check if I have done something wrong. What I find odd is that my Galleryheight is correct but the Gallerywidth is at 100%
Please take a look and let me know.
I have update the test page : https://www.delosgaia.nl/index_test.htm
Try putting your setGallerySize method inside an onInitComplete wrapper so that setGallerySize is run only when the gallery is ready to accept calls to API methods.
Instead of:
jb.setGallerySize(galleryWidth, galleryHeight);... try:
jb.onInitComplete = function() {
jb.setGallerySize(galleryWidth, galleryHeight);
};Hopefully this will help.
Hi Steven,
This did the trick, it is not yet perfect but this is starting to look how I wanted to have it. See: https://www.delosgaia.nl/index_test.htm
Thanks for your help.
One final question and I can't find it by the Juicebox API. Is there a way to reload a gallery without reloading the whole page
Thanks for your help.
You're welcome.
Is there a way to reload a gallery without reloading the whole page
Yes. You can put your gallery's embedding code inside a JavaScript function and call the function when required to reload the gallery.
Here's an example gallery 'index.html' page which will reload the gallery when the 'Reload' button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery() {
new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
}
$(document).ready(function() {
$('#reload').click(function() {
loadGallery(); // Load gallery on demand (when 'Reload' button is clicked)
});
loadGallery(); // Load gallery when page is initially displayed
});
</script>
<title>Test</title>
</head>
<body>
<div id="link">
<input id="reload" type="button" value="Reload" />
</div>
<div id="juicebox-container"></div>
<div id="content">
<span>Other content.</span>
</div>
</body>
</html>Looks good but actually I was more thinking of something like:
jb.refresh
or
jb.reloadUnfortunately, as you've discovered, there's currently no API method to reload a gallery.
Maybe another one for the Feature Request thread...
I will, thanks
Unfortunately, as you've discovered, there's currently no API method to reload a gallery.
Maybe another one for the Feature Request thread...
Thanks for posting your suggestion in the Feature Requests thread.
Thanks for your help, you may close this post.
I have made some last modifications, split in load and resize functions and set a timeout for resize te prevent any distortion in the layout when a viewer resize his browser. I have kept the load function as short as possible to keep the fast load time of the Gallery.
I'm glad you've been able to get things working as you like.
Thank you for letting me know.
Juicebox Support Forum → Juicebox-Pro Support → Height and Width
Powered by PunBB, supported by Informer Technologies, Inc.