You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
As long as 'Crop To Fit' is deselected in JuiceboxBuilder-Lite, images should not be cropped in a Juicebox-Lite gallery under any circumstances that I can think of.
In order to help further, I would really need to see the gallery in question so please upload it to a server and post the URL so that I can take a look and help further.
The Juicebox web module for Lightroom is fully compatible with Lightroom 5.2.
Try completely removing the web module by deleting the 'juicebox.lrwebengine' folder from the following location:
Mac OS X - Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/
Windows Vista & Windows 7- C:\Users\username\AppData\Roaming\Adobe\Lightroom\Web Galleries\
Windows XP - C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries\
... and then do a fresh download and install following the instructions on the page in the link above.
Problem is if you then go back to the JB gallery, it is still scaled for Full Screen
Are you talking about using the browser's back button to "go back to the JB gallery"? If so, this is likely to be a browser caching issue which may be unavoidable.
If you go back to the gallery via a link (the URL that brought you to the unexpanded gallery in the first place), then the gallery should display OK.
Again, hiding Back button in Full Screen would be better I think
The Back Button may not be the only link in a gallery.
A user may have set imageClickMode="OPEN_URL", in which case each main image will be a link.
Also, links may have been embedded in the Gallery Title or in image titles or captions using HTML formatting as documented here.
Unfortunately, disabling the Back Button in fullscreen mode will not help in these scenarios.
Thank you for posting back with the additional information.
We will investigate this issue further.
Please note that I have just edited the code above so that it should not interfere with the Small Screen Mode rendering of the gallery. (During testing, I noticed that the Splash Page text area was offset using the original code.)
Try the following:
<style type="text/css">
.jb-flag-large-screen-mode .jbn-nav-left-touch-area .jbn-left-button.jbn-nav-button-icon {
margin-top: 50px;
}
.jb-flag-large-screen-mode .jbn-nav-right-touch-area .jbn-right-button.jbn-nav-button-icon {
margin-top: 50px;
}
</style>The default value for imageScaleMode (used by Juicebox-Lite) is SCALE_DOWN so images should not be cropped in a Juicebox-Lite gallery.
Are there any options other than "crop" to fit and "resize?"
These are options used by JuiceboxBuilder-Lite to prepare the images for the gallery (rather than configuration options used by Juicebox-Lite itself to display the images in the gallery). Setting 'Crop to Fit' will crop your images before they are used in the gallery.
Take a look inside your gallery's 'images' folder to see if the images themselves look like cropped versions of your original images. If they are, then remake your gallery in JuiceboxBuilder-Lite (using your original images as the source) and ensure that the 'Crop To Fit' checkbox is not selected on the 'Images' tab (but keep the 'Resize Images' checkbox selected).
If the 'Resize Images' checkbox is not selected, then JuiceboxBuilder-Lite will simply copy your original images across to the output 'images' folder without resizing them. This may not be suitable if your original images are large.
It sounds like you may be using one of the imageScaleMode settings which crops (rather than scales-to-fit) images.
Take a look at the possible values for imageScaleMode in the Main Image Options section of the Config Options page and try using SCALE_DOWN or SCALE.
If this does not help, then please post the URL to your gallery so that I can take a look and help further.
The thumbsVAlign configuration option vertically aligns the thumbnails within the thumbnail area.
If you change your gallery's captionPosition from 'BELOW_IMAGE' to 'BOTTOM', this will bump the thumbnails up a bit as the thumbnail area will no longer extend to the bottom of the gallery but just to the top of the caption area.
I would not recommend trying to tweak the position of a gallery element using CSS as it is likely to have unwanted knock-on effects. For example, when the browser window is resized and elements need to be redrawn, Juicebox will not know of your manual modifications and will not be able to take them into account.
However, if you really want to try it (and as your gallery has fixed dimensions, it may work OK), you could try adding the following CSS to the <head> section of your web page:
<style type="text/css">
.jb-flag-large-screen-mode .jb-idx-thumbnail-container {
margin-top: -50px !important;
}
.jb-flag-large-screen-mode .jbn-nav-button.jbn-left-button.jbn-nav-button-icon {
margin-top: -50px;
}
.jb-flag-large-screen-mode .jbn-nav-button.jbn-right-button.jbn-nav-button-icon {
margin-top: -50px;
}
</style>Does your gallery use the current version of Juicebox-Pro (v1.3.2)? (If not, try upgrading following the instructions here.)
Do you have any other (JavaScript) code on your web page which may be conflicting with Juicebox?
Does this happen with our Pro Full Browser Demo gallery?
Please post the URL to your gallery so that we can take a look. Thank you.
The following configuration options should get you close to your desired layout:
thumbsPosition="RIGHT"
maxThumbColumns="3"
maxThumbRows="2"
imagePadding="0"
stagePadding="0"
imageNavPadding="0"
thumbNavPosition="BOTTOM"@rj74
Clicking any thumb Expands JB full viewport and shows image.
There are currently issues with Juicbox-Pro API events not being fired in Small Screen Mode but once these are fixed in the next version of Juiecbox-Pro, you might be able to achieve this using the available API events and methods. You could keep track of whether or not the gallery is expanded (by setting a tracking variable when onExpand is fired) and whether or not the thumbnails are displayed (by setting another tracking variable when onShowThumbs is fired) and expand the gallery (using toggleExpand) when an image is selected (when onImageChange is fired) but only if the gallery is currently unexpanded and displaying thumbnails. You could also ensure that when the gallery is unexpanded, the gallery will revert to displaying thumbnails.
No, not yet. We are working on a fix for the next version of Juicebox-Pro.
The only side-effect is that it will allow users to manually configure the gallery you created (overwriting the configuration options you have carefully chosen and set) by using their own configuration options in the query string of a URL that they can construct and enter into their browser's address bar. However, unless visitors to your web site are familiar with Juicebox-Pro and wish to manually configure the gallery that is displayed before them, this is highly unlikely to happen.
An alternative solution (without setting debugMode="TRUE") would be to set a session cookie when the user clicks on the link to the gallery and, in the web page containing the gallery, the cookie would be read and its value would be used as the value for the showThumbsOnLoad configuration option (in the gallery's embedding code).
Here is an example:
Use the following code as a page with a couple of links to the same gallery (call the page 'main.html').
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="cookie.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<div id="links">
<a href="index.html#12">Link without cookie set</a>
<br />
<a href="index.html#12" onclick="createCookie('showThumbsOnLoad', 'false'); return true;">Link <i>with</i> cookie set</a>
</div>
</body>
</html>Use the following code as a gallery's 'index.html' page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="cookie.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var value = "true";
if (document.cookie.length > 0) {
var index = document.cookie.indexOf("showThumbsOnLoad");
if (index !== -1) {
var temp = readCookie("showThumbsOnLoad");
if (temp !== null) {
value = temp;
}
}
eraseCookie("showThumbsOnLoad");
}
new juicebox({
containerId: 'juicebox-container',
showThumbsOnLoad: value
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>Put the following code into a file named 'cookie.js'. (This is the JavaScript code which handles creating, reading and deleting the cookie.)
function createCookie(name, value) {
document.cookie = name + "=" + escape(value) + "; path=/";
}
function readCookie(name) {
var re = new RegExp("(?:^|;)\\s?" + name + "=(.*?)(?:;|$)", "i"), result = document.cookie.match(re), output = null;
if (result !== null)
{
output = unescape(result[1]);
}
return output;
}
function eraseCookie(name) {
var d = new Date();
document.cookie = name + "=; path=/; expires=" + d.toUTCString();
}Now put all the files into a sample gallery folder and open 'main.html' in a browser to see it in action.
Thank you for posting back with the update.
I can't explain the inconsistent behavior but I'm glad the end result is what you are looking for.
Yes. That will work fine.
Unfortunately, the 'Images' text on the Splash Page cannot be translated via the languageList configuration option at the moment but it will be included in the next version of Juicebox-Pro.
There are no configuration options which would do this but it could be achieved by adding the following code to the <head>section of the web page which includes your gallery.
<style type="text/css">
.jb-splash-info {
display: none;
}
</style>Set debugMode="TRUE" in your gallery's XML file and you can then set configuration options in the query string of a gallery's URL as noted here, e.g.: http://www.example.com/gallery/index.html#12?showThumbsOnLoad=FALSE
Configuration options set in a query string will override those set in a gallery's embedding code or XML file.
What you are describing is the Splash Page.
This is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page (rather than displayed on a page of its own).
When the user taps 'View Gallery', the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.
You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').
If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.
It looks like something may have happened during the upload of your images to corrupt them.
If I go directly to the first image in your gallery in a browser (bypassing Juicebox), the following message is displayed:
The image "http://www.jkmurtha.com/webgallery/images/A-Happy-Occasion.jpg" cannot be displayed, because it contains errors.
Try re-uploading the images to your web server.
You could try increasing the stagePadding (in JuiceboxBuilder-Pro's 'Customize -> General' section) in your gallery to compensate for the current iOS 7 layout issues but your gallery may not look as you intend it to on non-iOS 7 devices.
However, it might be the best workaround until the problem is fixed in the next version of Juicebox.
I see this is mentioned on another post
But I would be interested to know why gallery does not line up in iOS7
The developers are aware of this issue and it should be fixed in the next version of Juicebox.
The problem has likely arisen due to the different usable browser window size and the behavior of the new Mobile Safari toolbars. For example, the top toolbar can no longer be hidden using code which worked in iOS 6 and previous versions.
It is not possible to replicate AutoViewer with partial previous and next images visible at the same time as the main image.
@actigner
Thank you for posting your suggestion.
For a couple of tips to prevent having to modify the 'theme.css' file each time you update a gallery, please see this forum post.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.