You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
A Juicebox gallery container is essentially just a <div> on a web page and a Juicebox gallery will resize in exactly the same way as any other <div> with similar dimensions would.
If you want a gallery container to retain a constant aspect ratio at all times, then please see the example in this forum post.
Thank you for pointing this out. I have noted it in my bug report.
Unfortunately, the only workaround for this seems to be my second suggestion above (to make your gallery images larger so that they always fill the image area top to bottom so that the problem cannot be seen).
Here's an example of how you can find the actual height of the current image being displayed in the gallery (using JavaScript and the Juicebox-Pro API).
Just create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file:
<!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">
var jb = new juicebox({
containerId: "juicebox-container"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var image = new Image();
image.src = url;
var height = image.height;
alert('Actual height of current image is ' + height + 'px.');
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>Please note that this will provide the actual height of the file in the 'images' folder (not the height at which the image is displayed in the gallery which will depend on factors such as the gallery dimensions, the browser window size and whether or not gallery elements reserve space in the gallery reducing the available image area).
If you wanted to act upon the actual height of the current image and change the gallery's height to suit the current image's height you could do something like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var widthInteger = 600;
var widthString = widthInteger.toString();
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: widthString,
imageScaleMode: "SCALE"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var image = new Image();
image.src = url;
var height = image.height;
var width = image.width;
var newHeight = Math.floor((widthInteger/width)*height) + 105;
jb.setGallerySize(widthString, newHeight);
};
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>The gallery would have a constant width (600px in the example) and its height would be dependent on the height of the current image. The '105' value adds enough height to the gallery to accommodate the thumbnails and the thumbnail padding at their default values of '85' and '10' (top and bottom).
... but nothing appears on the page itself - no image, no thumbnails, no navigation, nothing.
It sounds like there might be a problem with the actual Juicebox core files on your web server.
Try re-uploading your gallery's 'jbcore' folder to ensure that all Juicebox core are present and correct (in case something happened during the initial upload resulting in missing or corrupt files).
Also, please see this FAQ as it seems to describe your scenario and may help:
When I view my gallery, I see a blank area. Why?
If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. Thank you.
Thank you for reporting this issue.
I have logged a bug report with the developers and hopefully it will be fixed in a future version of Juicebox.
In the meantime, you could perhaps tweak the position of the Button Bar using code such as the following in the <head> section of your gallery's web page:
<style type="text/css">
.jb-bb-bar {
margin-left: -2px !important;
}
</style>I'm glad it worked. Thank you for letting me know.
It worked for me (with your menu covering both the gallery's Button Bar and caption area) when I dynamically added the code to your web page locally using the developer tools in Firefox.
Please try changing lines 2704-2712 in your bootstrap.min.css file from:
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .35s ease;
-moz-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease
}... to:
.collapse {
z-index: 9999;
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .35s ease;
-moz-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
}... and clear your browser's cache before reloading your web page to ensure that your browser is using the new version of the CSS file.
If this still does not work, then please let me know and I'll take another look.
Also, the link I posted above (regarding UberMenu and 'z-index' values) should help.
http://sevenspark.com/diagnosis/z-index … rm_ref=877
If you do not set playAudioOnLoad="TRUE" or showAudioButton="TRUE" (to allow audio functionality), then audioUrlMp3 will not actually be used and its entry in the gallery's 'config.xml' file will just be redundant.
If you wanted to prevent audioUrlMp3 from being written to the gallery's 'config.xml' file, then you could change line 42 of the plugin's 'config.xml' file from:
if (value ~= tostring(model.default[key])) then... to:
if (value ~= tostring(model.default[key]) and key ~= "audioUrlMp3") thenAs the new Lightoom plugin no longer has a Pro Option text area, you would need to use one of the available configuration options to enter your custom data.
I would recommend using an input field which accepts text and will not actually be used in your own gallery. For example, if you are not using audio in your gallery, you could use the audioUrlMp3 field.
Add the following to the plugin's 'config.xml' file (on line 48 which is currently blank):
<% local dir = ""
if mode ~= "preview" then
dir = model.juicebox.audioUrlMp3
end %>... and change line 54 from:
<image imageURL="images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">... to:
<image imageURL="<%= dir %>images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">You can then enter something like the following into the audioUrlMp3 field:
http://www.example.com/juicebox/gallery/... and the imageURL entries will look like this:
imageURL="http://www.example.com/juicebox/gallery/images/image.jpg"Please note that the line numbers refer to the current version of the plugin (v1.4.4.0).
Thank you for the additional information.
I now see the problem in your sidebar gallery when the menu is not fixed to the top of the page.
It looks like it might be enough to just add the following to your web page's CSS:
.collapse {
z-index: 9999;
}Add this to the existing .collapse code in your 'bootstrap.min.css' file (on line 2704) and it will be included in all of your web pages that load the CSS file.
Hopefully this will solve your problem.
For reference, further information about UberMenu and 'z-index' issues can be found here.
The easiest solution would probably be to increase the CSS 'z-index' value on your menu and hover elements so that they are stacked on top of all gallery elements.
I don't actually see the problem myself.
If I scroll down one of your pages with a gallery on it (so that the caption area is close to the menu) and then hover over a menu button, the menu element completely covers the gallery (the caption does not show through).
If you can tell me exactly how I might be able to see the problem (which page or pages exhibit the problem and what steps I can take to replicate it), I will take another look and hopefully be able to help further.
I see the problem now in a large desktop monitor. (I was previously using my laptop.)
The problem is seen only when there is space between the main image and the thumbnails (which is why you see the problem only in expanded mode and I did not see the problem on my laptop).
The problem seems to be due to setting imageTransitionType="CROSS_FADE" and it is not directly related to the AutoPlay functionality.
If you are currently viewing the last thumbnail on a thumbnail page and manually navigate to the next image using the main image navigation button, the problem can be seen.
I have logged a bug report with the developers and this should hopefully be fixed in the next version of Juicebox-Pro.
In the meantime, possible workarounds would be to either:
(1) Set imageTransitionType to SLIDE, FADE or NONE.
... or:
(2) Make your gallery images larger so that, even on large monitors or in expanded mode, the images fill the image area from top to bottom (so that the problem cannot be seen).
There are two possible instances for 'alt' attributes for each image.
(1) The 'alt' attribute for the <img> tag corresponding to the image displayed in the gallery. This 'alt' attribute is populated by the Image Title and is generated dynamically by the 'juicebox.js' JavaScript file at the time the gallery is displayed. The 'juicebox.js' file is obfuscated and cannot be modified so this 'alt' attribute cannot be changed.
(2) The 'alt' attribute for the <img> tag in the SEO content code (which is produced only if the 'Add SEO Conntent' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section). This 'alt' attributes is populated by the Image Caption. Although it is not possible to change what JuiceboxBuilder-Pro uses to populate these 'alt' attributes, the SEO content code forms part of the gallery's embedding code (presented on JuiceboxBuilder-Pro's 'Publish' tab and included in the gallery's 'index.html' file) which you can edit manually in a text editor.
I am unable to see the problem when viewing your gallery in Chrome, Firefox or IE11 on my PC.
What browser (or browsers) to you see the problem in?
Also, does the problem happen only in expanded mode or also in normal mode?
I notice that your gallery uses Juicebox-Pro v1.4.4 which was released only a week ago.
Try completely clearing your browser's cache before reloading your gallery's web page to make sure that your browser is not using cached files from previous versions of Juicebox-Pro.
I'm glad you've got it working.
Thank you for posting back to let me know.
The problem is likely to be due to the backslashes in your gallery's imageURL and thumbURL paths (in the 'config.xml' file). As these are relative paths, use slashes instead.
For example, change:
imageURL="images\0000029709.jpg"... to:
imageURL="images/0000029709.jpg"A couple of other things to check/try...
In your gallery's embedding code (in the 'index.html' page), change:
useThumbDots: "0"... to:
useThumbDots: "TRUE"This will probably not make a difference but possible values for the useThumbDots configuration option are TRUE and FALSE (rather than 1 and 0).
Also, try removing the comment from the top of the 'config.xml' file.
Hopefully this will solve your problem.
I'm glad you've been able to figure it out. Thanks for letting me know.
The image data must be in the required <image> tag format (using imageURL and thumbURL attributes) in an XML file.
It is not possible to provide the image data to Juicebox via JavaScript in the embedding page.
Please see Step #4 ('Edit config.xml') in the Manually Creating a Gallery support section for a sample <image> tag.
You could, however, use a server-side scripting language (such as PHP) to extract data from a custom source and build the XML file dynamically (see the example in my first post above).
The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.
The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.
The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.
You're welcome!
I'm glad I was able to help.
The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.
The bug noted above whereby the default value of maxThumbRows (1) is not respected on small screen devices when screenMode="LARGE" has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.
@tina.maldita
It is not possible to specify an exact number of thumbnails to display. The actual number of thumbnails is dynamic and will depend on the area available (factors being the size of the gallery and, if the gallery is responsive, the size of the browser window).
You can, however, set maxThumbRows and maxThumbColumns to specify maximum limits for the thumbnail rows and columns respectively. Also, if you give your gallery fixed pixel dimensions (rather than percentages), then the size and shape of the gallery will not change if the browser window is resized so the number of thumbnails will not change.
You could perhaps tweak your gallery dimensions, thumbnail dimensions and maxThumbRows and maxThumbColumns to give you the exact number of thumbnails that you are looking for.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.