Topic: Splash Page image size
It would be wonderful to be able to configure the size of the splash page images.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Splash Page image size
It would be wonderful to be able to configure the size of the splash page images.
Here are a few tips which may help:
(1) The size of the Splash Page is determined by the gallery's dimensions. The Splash Page is the same size as the gallery would be if the Splash Page was not used (by setting showSplashPage="NEVER") and the gallery was displayed in its place.
(2) By default, the image used for the Splash Page is the first image in the gallery. You can specify a different image if you like via the splashImageUrl configuration option. For reference, a list of all Splash Page options can be found here.
(3) The image used for the Splash Page is scaled to fill the Splash Page's area. Unless the aspect ratio of the image and the Splash Page are identical, the image will either:
(a) Fill the Splash Page left-to-right with cropping at the top and bottom.
... or:
(b) Fill the Splash Page top-to-bottom with cropping at the left and right.
Hopefully these notes will help you configure your gallery as best you can usign the available options.
[Thread moved.]
Hi, Steven,
Thanks. I have tried all of these options, but to no avail. When I set it to "Never", the gallery does not display correctly. The gallery displays beautifully when I use "AUTO", but then I have the problem of the overly large and kind of sloppy-looking splash page. I like the idea of the splash page; I just don't like the size at which it displays.
When I tried making smaller images (no larger than 250px height) to use solely for the splash pages and linked to them using the method above, it cropped it in half and only displayed the right half of the image. Would you be able to suggest a size for the picture so that it fills the screen without looking too large?
... it cropped it in half and only displayed the right half of the image.
Please make sure that you are using the latest version of Juicebox-Pro (v1.4.3). Your Splash Page image should not be cropped like this.
There was a Splash Page image sizing problem in previous versions which was fixed in v1.4.0. (Please see the Version History for a full list of changes between versions.)
If necessary, instructions for Upgrading Juicebox can be found here.
The Splash Page is essentially just a link to a full-page gallery so if you do not like the Splash Page using the gallery's dimensions, then perhaps you could create your own version of a Splash Page - an HTML link (whether text or an image) which opens the gallery's 'index.html' page in a new tab/window (with the gallery being the only element on the 'index.html' page embedded at 100% x 100%).
Please make sure that you are using the latest version of Juicebox-Pro (v1.4.3). Your Splash Page image should not be cropped like this.
Yes, I do have the latest version, and I am using the Wordpress plugin. This cropping is happening when I use the "splashImageUrl" configuration option to point to an image that I created specifically for the splash page. So I axed that configuration option and went back to using AUTO, where the splash page features the first image in the gallery, but the image is zoomed in and looks a bit awkward. (Please refer to: www.kleibography.com/personal on your phone to see an example.)
The Splash Page is essentially just a link to a full-page gallery so if you do not like the Splash Page using the gallery's dimensions, then perhaps you could create your own version of a Splash Page - an HTML link (whether text or an image) which opens the gallery's 'index.html' page in a new tab/window (with the gallery being the only element on the 'index.html' page embedded at 100% x 100%).
Is that different from the "splashImageUrl" configuration option?
It looks like the cropping of your Splash Page's image is caused by the following code starting at line 8 of your style.responsive.css file.
.responsive .axis-content-layout img,
.responsive .axis-content-layout video
{
max-width: 100%;
height: auto !important;
}This code will affect the size of all images within the content section of your web page including your Splash Page image.
The Juicebox gallery has no option but to inherit such global CSS rules. (It is not possible to isolate a Juicebox gallery, or any other element on a web page, from global CSS.)
If possible, try applying these CSS rules to only those elements on your web page which require them through use of ids or classes. (Otherwise, you might find that just removing these CSS rules works OK.)
Is that different from the "splashImageUrl" configuration option?
Yes. I was suggesting that you might like to create your own version of a Splash Page linking to a gallery page.
However, now that I know you are using WP-Juicebox, this might not be easy to achieve. It would be difficult to implement within WP-Juicebox as WP-Juicebox embeds galleries (or Splash Pages) directly into pages and posts and does not allow for a link to a full-page gallery to be used in place of the gallery itself.
I've moved this query to a new thread to keep the full conversation out of the Feature Requests thread.
(It helps to keeps the Feature Requests thread clean and makes finding requests easier for the developers.)
Please feel free to re-post your original suggestion in the Feature Requests thread again (just so there is a record of it there). Thanks.
Hi again,
I've decided that I like the look of the gallery without the splash page, as it looks neater when just the thumbs appear. However, when I click on the first image, it doesn't expand automatically to full-screen, but kind of jumps all over the page. Is there any way to set the thumbnails to expand to full-screen on first click when showSplashPage is set to "NEVER"?
Thanks!
Meredith
However, when I click on the first image, it doesn't expand automatically to full-screen, but kind of jumps all over the page.
If you have a gallery which exhibits this behavior, please post its URL so that I can take a look and investigate further. (Your '/personal/' gallery still uses a Splash Page.)
If there is any problem with conflicting CSS, then the easiest way to avoid this is to use the Splash Page and set expandInNewPage="TRUE" so that when the gallery is expanded, it is expanded on a new page of its own where it cannot be affected by any CSS on your embedding page.
Also, I notice that your gallery uses Juicebox v1.4.3.
The latest version is actually v1.4.3.2. We have released a couple of hotfix versions to address a couple of bugs relating to pages jumping to the top when scrolling or closing expanded gallerieson iOS 8 devices.
You might like to try upgrading your gallery to the latest version to see if this helps.
Instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page. (The latest zip file is named 'juicebox_pro_1.4.3.2.zip' and the version number is noted in the comments at the top of the 'jbcore/juicebox.js' file.)
Is there any way to set the thumbnails to expand to full-screen on first click when showSplashPage is set to "NEVER"?
Juicebox was not designed to allow the gallery to expand on a thumbnail click. You could try to achieve this using the available methods in the Juicebox-Pro API but you might run into difficulties.
To see an example of this in action, create a test gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code below:
<!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;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "AUTO",
showExpandButton: "TRUE",
showSmallThumbsButton: "TRUE",
showSmallThumbsOnLoad: "TRUE",
showSplashPage: "NEVER"
});
if (jb.getScreenMode() === 'SMALL') {
var fullscreen = false;
var thumbs = true;
jb.onExpand = function(expanded) {
if (fullscreen && !thumbs) {
jb.toggleThumbs();
}
fullscreen = !fullscreen;
};
jb.onImageChange = function(e) {
if (!fullscreen) {
jb.toggleExpand();
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
}
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>This will expand the gallery each time a new image is selected (in Small Screen Mode only) whether from the thumbnail page or a main image page. There is no way to distinguish whether an image is being selected from a thumbnail page (via a tap) or from a main image page (via a swipe).
Also, in order to include this functionality within a WP-Juicebox page, you would need to:
(1) Set the required configuration options as normal (Lite Options in the interface and Pro Options in the 'Pro Options' text area).
(2) Add the following code (in 'Text' mode, not 'Visual') below the Juicebox shortcode in the body of your WordPress page or post.
<script type="text/javascript">
if (jb_4.getScreenMode() === 'SMALL') {
var fullscreen = false;
var thumbs = true;
jb_4.onExpand = function(expanded) {
if (fullscreen && !thumbs) {
jb_4.toggleThumbs();
}
fullscreen = !fullscreen;
};
jb_4.onImageChange = function(e) {
if (!fullscreen) {
jb_4.toggleExpand();
}
};
jb_4.onShowThumbs = function(showing) {
thumbs = showing;
};
}
</script>In the above example, 'jb_4' is used as the variable name for the 'juicebox' object. The '4' is the gallery id.
If your gallery id is 25, then replace all the instances of 'jb_4' with 'jb_25'.
I hope this points you in the right direction.
Juicebox Support Forum → Juicebox-Pro Support → Splash Page image size
Powered by PunBB, supported by Informer Technologies, Inc.