The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.
The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.
The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.
httpdocs/jbg/jbcore/juicebox.js is a server path rather than a URL (the 'httpdocs' folder is visible only to you on your web server and not to anyone else on the internet).
You can use absolute paths, in the form http://www.example.com/jbg/jbcore/juicebox.js or relative paths (relative to the page containing the gallery's embedding code).
If your 'jbg' gallery folder is in your root directory, you can use a leading slash to denote the root and use the following embedding code, e.g.:
<!--START JUICEBOX EMBED-->
<script src="/jbg/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "/jbg/",
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(18,18,18,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
The easiest solution (if both the backButton and galleryTitle are positioned on the OVERLAY) would be to set backButtonHAlign="LEFT" and galleryTitleHAlign="CENTER" (or vice versa). (An alternative solution would be to set backButtonPosition="TOP" and galleryTitlePosition="OVERLAY".)
Is there any solution - by options or by modifying CSS(custom theming) - to position the gallery title just after the back button ? Or just before it ?
You should be able to tweak the position of either the Back Button or the Gallery Title via CSS as follows:
<style type="text/css">
/* Back Button */
.jb-go-back {
margin-left: 100px !important;
}
/* Gallery Title */
.jb-area-large-mode-title {
margin-left: 150px !important;
}
</style>
And more generally, can an element be positioned relatively to another element by custom theming ?
No. This is not possible.
Is it possible to stop the Caption/Title fade transition?
No. The way the captions fade or pop in and out is purely dependent on the captionPosition and imageTransitionType configuration options. Perhaps you can find a combination of values for these two options which suits your needs as best as possible.
We did not write the Juicebox module for Drupal ourselves and, unfortunately, I am unfamiliar with its code.
Please post your query in the Drupal forums where the author of the module should be able to help you out.
Take a look at the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header support section.
The sample has a header with links to two galleries. Each gallery is actually on a page of its own with the header duplicated in each page. You can view the source of the web pages in your browser and copy/modify the code as you like.
For a single page solution, try the following.
Create two galleries and name the gallery folders 'gallery1' and 'gallery2'.
Create a HTML file with the code below, put the file in the same directory as your two gallery folders and open it in a browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding-top: 10px;
text-align: center;
width: 100%;
}
#header a {
color: #666666;
text-decoration: none;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
// Function to resize gallery
function doLayout() {
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
var headerHeight = $('#header').outerHeight();
var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
$('#wrap').height(galleryHeight);
}
// Function to load selected gallery on demand using baseUrl
function loadGallery(base) {
new juicebox({
containerId: 'juicebox-container',
baseUrl: base
});
}
// Run following code when page is initially loaded
$(document).ready(function () {
// Run function to resize gallery
doLayout();
// Ensure function to resize gallery is run when browser window size changes
$(window).bind('resize', doLayout);
// Run function to load Gallery #1
loadGallery('gallery1/');
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
<span> </span>
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
@guuz
If you just want the image to open in a new tab/window when clicked, set imageClickMode="OPEN_URL".
When an image is clicked, the corresponding linkURL will be opened in a tab/window specified by the linkTarget attribute.
You might like to take a look at this forum post which details how to have each image appear in a lightbox-style overlay when clicked.
But each gallery on the same page has an extra paragraph div added above each gallery. Can't tell if it's Wordpress or a Juicebox issue.
If there is an extra <div> in your page above each gallery, then it is likely to be a WordPress issue.
Juicebox does not add any new <divs> to a page outside the 'juicebox-container' <div>.
If I knew what Juicebox CSS element to use/call in a nested p.juciebox-elemet and make the p be 1 pixel rather than do a float left & clear.
Perhaps using a browser's developer tools (F12 in Chrome or the 'Inspect Element' right-click option in Firefox) will help you track down the CSS element(s) you would like to modify.
Thank you for providing the URL to your gallery.
It looks like your problem is caused by global CSS rules in your 'style.css' file. In this file you have the following code:
img, object, embed, video {
max-width: 100%;
left: 75px;
right: auto;
margin-top: 10px;
margin-left: 5px;
position: relative;
float: left;
}
These CSS rules will apply to all images on your web page (including those in your Juicebox gallery). Juicebox has no option but to inherit such global rules.
These rules should be applied only to those elements on your web page which require them through use of CSS classes and ids.
If you were to remove the code above (just as a test), you should hopefully see that the gallery functions correctly and your images are no longer shifted to the right (resulting in cropping).
Try scaling your web page for mobile devices by adding the following <meta> tag to the <head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information about the <meta> 'viewport' tag, please see here.
Give each 'juicebox-container' <div> a unique 'id' and refer to that 'id' in the gallery's containerId configuration options.
For example:
<!--START JUICEBOX EMBED-->
<script src="http://www.mywebsite.com/_juicebox/First-Gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/First-Gallery/",
containerId : "juicebox-container-one",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-one"></div>
<!--END JUICEBOX EMBED-->
Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.
<!--START JUICEBOX EMBED-->
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/Gallery-Two/",
containerId : "juicebox-container-two",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-two"></div>
<!--END JUICEBOX EMBED-->
Incidentally, you need to load only one instance of the 'juicebox.js' file on your page and your baseUrls should end with a trailing slash.
Unfortunately, I do not know when the next version of Juicebox will be released. There is no set release schedule and it will be released only when it is ready. Any estimate I give you could turn out to be wholly inaccurate.
All I can suggest is that you either sign up to our mailing list at the foot of our homepage or follow us on Twitter @JuiceboxGallery to be notified when new versions are released.
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"
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.