You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
No. This would not be possible.
Every image in the gallery has a corresponding thumbnail. This is core functionality and it is handled by the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be modified.
Even if you tried to hide the first thumbnail with CSS, Juicebox would not know of your custom modification and this would cause problems with the gallery layout.
It looks like Silex is a web template site builder rather than a regular web host which provides FTP access to the web space that they provide. As such, you may not be able to upload your gallery files to your Silex web space.
If this is the case, then you will need to host your gallery elsewhere (such as Google Drive) and follow the Embedding in a Web Template Site instructions.
i use firefox and silex editor www. silex.me using drop box.
If you have already uploaded your gallery to Dropbox (although I'm not sure this is still possible due to Dropbox restrictions), then you should be able to load your gallery's 'index.html' page (on Dropbox) into an iframe and include the iframe line of code into your Silex page.
There is no way to set different icons for the Button Bar for Small and Large Screen Modes.
However, as long as you do not set showInfoButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section), then the entire overlay (including the Button Bar and all its icons) can be toggled on and off in Small Screen Mode by tapping the screen.
If you set showInfoButton="TRUE", then the Button Bar (including the Info Button) will always be present and tapping the Info Button will toggle the remainder of overlay elements on and off.
An alternative might be to use the Juicebox-Pro API getScreenMode() method to detect whether Small or Large Screen Mode is being used and then reload the gallery (if required) with the social media icons hidden in Small Screen Mode.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#juicebox-container {
display: none;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var counter = 0;
var jb;
function loadGallery(value) {
jb = new juicebox({
containerId: "juicebox-container",
screenMode: "AUTO",
shareFacebook: value,
shareGPlus: value,
sharePinterest: value,
shareTumblr: value,
shareTwitter: value
});
counter++;
}
loadGallery(true);
jb.onInitComplete = function() {
var screenMode = jb.getScreenMode();
if (counter === 1 && screenMode === 'SMALL') {
loadGallery(false);
}
if ((counter === 1 && screenMode === 'LARGE') || (counter === 2 && screenMode === 'SMALL')) {
$('#juicebox-container').show();
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>It may take a little longer to load than usual as it's actually loading the gallery twice if Small Screen Mode is being used (once to determine the screen mode being used and the second time with the correct 'share' configuration options).
The gallery is hidden from view until after the final load (so the user does not see the gallery load twice).
Maybe not ideal but perhaps the best solution for something that Juicebox was not designed to do.
Also, if you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.
Perhaps the best course of action would be to set showThumbsButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and allow visitors to your web site to toggle the thumbnails on and off as required.
You could then post your suggestion in the Feature Requests thread.
I do not now which ideas will be implemented in future versions but posting in this thread keeps all the ideas together and ensures that they are not overlooked by the developers.
The main reason for my interest in this issue is that if you display your gallery in expanded mode the thumbs take away too much space on mobile small screen devices such as an iphone.
This is why Small Screen Mode exists. In Small Screen Mode, the thumbnails and main images are displayed on different pages (never together) to give more space to the main images on small screen devices.
Perhaps you could give screenMode="AUTO" ('Customize -> General') another try.
If you do not want to use the Splash Page (which Small Screen Mode uses by default when a gallery is embedded in a web page alongside other content), then you could set showSplashPage="NEVER" ('Customize -> Splash Page').
For reference, more information about Screen Modes and the Splash Page can be found here.
I notice when you hover over the link on your main page, the browser's status bar displays the 'node/73' URL but clicking the link does not actually take you to that page. The browser remains on the 'team-vertical' page and seems to dynamically load fresh content (but not the Juicebox gallery). After clicking the link, there is no sign of any Juicebox embedding code on the page.
Unfortunately, I am not familiar with your Drupal theme and do not know where content should be placed in order for it to be displayed when you click the links on your main page.
As you are aware, the problem seems to be directly related to your Drupal theme rather than Juicebox.
If you replaced the Juicebox gallery with any other content, then the same thing would likely happen when you click the link on your main page: the extra content would not show up unless you went directly to the 'node/xyz' page.
There's no problem with posting your query here (hopefully some other Drupal users will read this and be able to help you out further) but you might have better luck in the Drupal forum. Maybe someone familiar with the theme will be able to offer some help.
Just for the record, there is a dedicated Juicebox module for Drupal which can be found here.
I don't know if it will be of any use to you but I thought I should mention it in case you are somehow able to integrate it into your web site.
(1) Your gallery does expand in a new page when I expand it on my own iOS device.
When expanded, the gallery is displayed by the 'full.html' page instead of on top of the embedding page ('poi_rhyolite.php').
(2) OK. Thank you for trying. It was worth it to see what happens. (I still think that a timing issue may somehow be contributing to your problem.)
I've viewed your gallery in Mobile Chrome and Mobile Safari on my iPod Touch and the 'hide thumbnails' functionality works as expected in both browsers.
Try the following simplified code which does not wait for the onShowThumbs(showing) event to be fired before flipping the value of the thumbnail tracking variable.
<!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",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "LARGE",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE"
});
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
jb.toggleThumbs();
thumbs = !thumbs;
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>Also, as your gallery does not display the Thumbnail Button at all, there should be no need to check the visibility of the thumbnails. (They should always be visible in normal mode and always be hidden in expanded mode.) Therefore, you could try the following:
<!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 thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "LARGE",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE"
});
jb.onExpand = function(expanded) {
jb.toggleThumbs();
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>Unfortunately, I do not have access to an iPad Pro but I have viewed your galleries on an iPhone running iOS 9.2.1 and do not see any cropping of your images in portrait or landscape orientations (in Mobile Chrome, Mobile Firefox and Mobile Safari).
As your galleries are full page galleries (with no other content on the pages), there is certainly no conflicting CSS.
It sounds like the problem may be directly related to certain mobile browser/device combinations and is not something that can be fixed with any of the available configuration options.
Perhaps the best course of action would be for you to provide a screenshot demonstrating the problem and I will pass it on to the developers who will investigate further. Please upload a screenshot somewhere (either your own web server or a file sharing service such as Dropbox) and post a link to it in this forum thread.
Also, does the problem happen when the gallery is initially loaded in landscape orientation or just when the device is rotated into landscape orientation?
Thank you.
@rj74
Thank you for your suggestion.
As you are aware, such functionality is not currently available within Juicebox but something similar is available within another of our products - Showkase.
As well as being able to create Juicebox gallery pages, Showkase can create ListViewer gallery pages.
Images are listed one per row in a vertical list with image titles and/or captions displayed below each image.
There are certain layout options available which you can see if you log into the Live Demo Admin and go to edit the ListViewer gallery page.
Demos of ListViewer gallery pages can be found here:
https://www.showkase.net/demos/paulbica/nature/
https://www.showkase.net/demos/patricksurace/cgi/
https://www.showkase.net/livedemo/list-gallery/
This type of gallery is unique to Showkase (it cannot be created outside Showkase) and nothing happens when you click an image so it's not exactly like your suggestion but its the closest you can get with any of our products at the moment and I thought I should mention it in case it helps.
Try adding the following CSS to your web page (or at the bottom of your gallery's 'jbcore/classic/theme.css' file):
.jb-splash-holder img {
max-width: 40px !important;
}This should hopefully prevent your custom CSS rule from affecting the Splash Page image in your gallery.
It looks like the problem is that your gallery is inheriting some CSS from your 'style.min.css' file, specifically the 'max-width' entry in the code below (about half way down your 'style.min.css' page).
.bd-tagstyles:not(.bd-custom-image):not(.shape-only) img{max-width:100%;vertical-align:middle;display:inline-block;text-align:center}This CSS is affecting the Splash Page image. It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS and the gallery has no option but to inherit such rules.
I do not know how important this CSS rule is to other images on your page so I do not know if you could safely remove it.
Perhaps the best course of action would be to apply your custom CSS rules to only those elements on your web page which require them through use of further CSS selectors (classes and ids).
My suggestion above works OK in Mobile Chrome and Mobile Safari on my iPod Touch.
However, here are a few thoughts that might help (although please note that Juicebox was not designed with this functionality in mind).
(1) On iOS devices, the gallery will automatically expand in a new page. Please see the Expand Gallery Behavior support section for details.
Try setting expandInNewPage="FALSE" (at least for testing purposes) to see if this makes a difference.
(2) My code above forces the gallery to always be displayed in Large Screen Mode. If you want to retain Small Screen Mode for mobile devices, you could try the following:
<!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 thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "AUTO",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE",
});
jb.onInitComplete = function (){
var screenMode = jb.getScreenMode();
if (screenMode === 'LARGE') {
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
jb.toggleThumbs();
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>(3) There may also be a timing issue. Introducing a short delay (such as one second in the code below) before toggling the thumbnails might help. (It might not be an ideal solution but doing so should at least tell us whether this is the root of the problem or not.)
<!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 thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "LARGE",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE"
});
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
setTimeout(function() {
jb.toggleThumbs();
}, 1000);
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look and hopefully help further.
Please also let me know what version of iOS your device runs and what browser(s) the problem occurs in (Mobile Chrome, Mobile Firefox, Mobile Safari). Thank you.
It would not be possible to do this via the available configuration options.
However, you could use the Juicebox-Pro API to check whether or not the gallery is in expanded mode (via the onExpand(expanded) event) and toggle the thumbnails if necessary (via the toggleThumbs() method). You can keep track of whether or not the thumbnails are currently visible (for example if you choose to activate the Thumbnail Button and allow the user to toggle the thumbnails on and off) via the onShowThumbs(showing) event.
Here is an example of how this might be achieved.
To see the example in action, create a sample 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" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "LARGE",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE"
});
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
jb.toggleThumbs();
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I hope this helps.
This is not possible using only the available configuration options.
In Large Screen Mode, the thumbsPosition value is consistent across all browsers and devices and cannot be changed depending on orientation or the aspect ratio of the viewport.
Here's a possible solution using JavaScript to detect the aspect ratio of the viewport (each time the viewport size changes) and reload the gallery with the required layout if necessary.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.hml' page with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({
containerId: "juicebox-container",
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') {
a = '10';
b = '1';
c = 'BOTTOM';
loadGallery(a, b, c);
}
if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I hope this helps.
Please check to see if you see the same problem in any or all of our demo galleries on this page: http://www.juicebox.net/demos/
Also, please let me know what version of iOS your device is running and whether you see the problem in Mobile Safari only or also in other browsers such as Mobile Chrome and Mobile Firefox.
It might also help if I were able to see the gallery that you are referring to so please post the URL to your gallery's web page so that I can take a look at the problem for myself.
Other things to check:
(1) Make sure that you have set imageScaleMode="SCALE_DOWN" or imageScaleMode="SCALE". Other values for imageScaleMode (FILL or NONE) may result in images being cropped.
(2) Make sure that you do not have any custom CSS rules on your gallery's web page that may be interfering with the gallery.
You're welcome.
Just for the record, even though I still would not recommend using special or reserved characters within file names, we are looking into the possibility of having JuiceboxBuilder accept #, ? and ' characters (although problems may still occur on certain web servers when using these characters).
This is a known issue and is noted in the 'Known Issues' section of the JuiceboxBuilder User Guide.
JuiceboxBuilder will not accept images with the following characters in the filename: #, ? and '. Please rename files before importing to JuiceboxBuilder.
As an image filename forms part of a URL when uploaded to a web server, it would be wise to use only web-safe characters. Please see section 2.3 of this document for details: http://www.ietf.org/rfc/rfc3986.txt
Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.
JuiceboxBuilder can handle all images whose filenames use any or all of these unreserved characters.
We really love those share buttons...
Juicebox-Pro supports social media sharing and allows individual images within a gallery to be shared on popular social media platforms. Please see the Social Sharing support section for details.
... and the ability to have a 300x250 banner ad
Perhaps the easiest way to achieve this would be to place your gallery and banner ad alongside each other on the same web page. (It would not be easy to incorporate such an element within the gallery itself.)
Please see our demo galleries here for examples of what can be achieved with Juicebox-Pro.
For reference, a list of all available configuration options can be found here.
For customization beyond what is possible with the configuration options, please see the Theming Guide.
@35OL
Thank you for the suggestions but they sound more like ideas for Showkase than for Juicebox.
I notice you have posted them in the Showkase Feature Requests forum thread, too (which is a better place for them). Thank you.
I just thought I'd mention this for any other Juicebox users reading this thread and wondering about Gallery Index Pages (which are a feature of Showkase rather than Juicebox).
It looks like the problem is being caused by the W3 Total Cache plugin minifying the Juicebox JavaScript code, combining it with other (non-Juicebox) JavaScript code and loading it from a custom file:
http://www.pretty-story.com/wp-content/cache/minify/000000/M9bPKixNLarUMYYydHMz04sSS1L1cjPzAA.js
The 'juicebox.js' file needs to be loaded on its own and from its original location within the 'jbcore' folder.
Juicebox will not be able to determine the location of the 'theme.css' file otherwise.
Other than disabling the W3 Total Cache plugin completely, try just excluding the WP-Juicebox files from being minified by the plugin.
@gotty1
I'm glad you've found a suitable workaround.
Also, thanks for the other suggestion.
@gotty1
Thank you for the suggestion.
You could perhaps add your custom CSS rules to the foot of the 'theme.css' template file that JuiceboxBuilder-Pro uses when a gallery is built (or just modify the file as necessary).
In doing so, the custom CSS rules would appear in all galleries generated by the application (without the need to manually add them to each gallery after they have been created).
The location of the template file on a Windows 10 machine would be:
C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\classic\theme.css
I realise that this does not solve the problem that your suggestion would but it might make life a little easier in the meantime (but only if you use the same font settings for all your galleries).
(I am using Juicebox gallery 1.2 Pro)
First of all, please try upgrading your gallery to the latest version of Juicebox-Pro (v1.4.4.2) as many bugs have been fixed since v1.2 and upgrading might solve your problem without any further action.
Please see the Version History for a list of changes between versions.
Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.
Also, please double-check your gallery's XML file and configuration options to make sure that your images have titles or captions associated with them and to see if captionPosition has perhaps been set to NONE.
If this does not help, then please let me know how I can view your gallery so that I can see the problem for myself and hopefully help further. Thank you.
Thank you for reporting this issue.
I have notified the developers who will investigate further.
In the meantime, I'm glad that you have found a setting that works as you require.
@nebcb
Many thanks for posting your suggestions.
Just for clarification (and for other users using the Back Button), if you leave the backButtonUrl empty, then the Back Button goes back one page in the browser's history.
You can also set the backButtonUrl to be a relative URL (relative to the web page containing the gallery's embedding code) or an absolute URL, in the form http://www.example.com.
Just after the end of your 'juicebox-container' div, you have an HTML line break (<br />).
If you remove this, then there will be a little less space between the bottom of the gallery and your text.
Also, you have set thumbNavPosition="BOTTOM". This reserves space below the thumbnails for the thumbnail navigation buttons. If you set thumbNavPosition="CENTER" instead, the thumbnail navigation buttons would be positioned to the left and right of the thumbnails and there would be less space below the thumbnails.
If you are having trouble with space above and below your images (within the gallery), then this FAQ might be helpful.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.