Thank you for the additional information.
I have passed it on to the developers who will investigate further.
I will post back in this thread when I have any further news on this issue.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Thank you for the additional information.
I have passed it on to the developers who will investigate further.
I will post back in this thread when I have any further news on this issue.
Thank you for creating a valid test page. At least we can now eliminate HTML errors as being a possible cause of your problem.
A few users have reported a problem on Windows phones whereby a page containing an embedded gallery cannot be scrolled.
I looks like this might be the problem that you are encountering. (I have already notified the developers of this problem.)
Try disabling Reading View in IE11 just in case this is the cause of your problem.
Add the following line of code to your web page's <head> section. Once implemented, the Reading View icon should not appear in the address bar.
<meta name="IE_RM_OFF" content="true">After making this change, please be sure to clear your browser's cache before reloading your web page.
This may or may not help (another user has tried it without success) but it might be worth trying.
It should be quick and easy to do and might make a difference.
In your '/sites/all/themes/crosscar3/style.css' file, your .cross-nav class has been assigned a z-index value of 100.
Increase this value and your menu should function correctly (overlapping the gallery).
Change line 602 of your 'style.css' file from:
z-index: 100;... to:
z-index: 9999;Try fixing the HTML errors on your web page to see if this helps with your first and second problems.
Certain browsers may be more tolerant towards errors than others and this can result in inconsistent behavior across different browsers.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.
Many of the errors on your web page may seem to be trivial and not directly related to the problems you report but there are a few stray tags on your page resulting in elements which should be closed which are not (and vice versa).
The <div id="juicebox-container"> seems to be caught up in the mix.
With regard to your third issue, when enableDirectLinks="TRUE" (which your gallery uses), each image in the gallery is given a unique URL and clicking the Back Button in a browser will step back through these URLs. This is normal and to be expected.
If you do not want this to happen, then set enableDirectLinks="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) instead.
As long as you use relative paths for your audioUrlMp3 and audioUrlOgg entries (relative to the HTML page containing the gallery's embedding code), the audio should play OK when the gallery is run locally (from a hard drive or a DVD rather than from a web server).
For example, if you create a gallery with JuiceboxBuilder-Pro and then put your audio files (in this example named 'music.mp3' and 'music.ogg') directly in your gallery folder (alongside the 'config.xml' file and the 'images' and 'thumbs' folders), then the audioUrlMp3 and audioUrlOgg entries should look like this:
audioUrlMp3="music.mp3"
audioUrlOgg="music.ogg"For another example, if you created a new folder named 'audio' inside your gallery folder and put your audio files inside this folder, then the audioUrlMp3 and audioUrlOgg entries should look like this:
audioUrlMp3="audio/music.mp3"
audioUrlOgg="audio/music.ogg"Please note that Juicebox galleries will run locally only in Firefox and Safari. Please see this FAQ for details:
When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?
If you enter embedding code directly into the body of a WordPress page or post, make sure that the method of entry is 'Text' (which respects HTML code) and not 'Visual' (otherwise you will just see the code that you enter on the screen instead of the gallery).
Also, if you use the embedding code you posted above, you would need to upload the contents of your gallery folder to the same directory as the HTML page which contains the embedding code. This might be difficult to determine in a WordPress environment and I would recommend using the baseUrl method as described here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.
Another problem i ran into; the shopping car is gone on the mobile version.
Shopping Cart functionality is disabled in Small Screen Mode as most mobile device screens are not large enough to accommodate the size of the Fotomoto pop-up window. This is noted in the 'Additional notes' section of the Shopping Cart support page.
Whatever software package you use to create your web page, make sure that you enter the embedding code as raw HTML code and not as plain text.
For example, if using Dreamweaver, please check your input mode. You should enter the embedding code in 'View -> Code' mode rather than 'View -> Design' mode.
After notifying the developers, it has now been logged as a bug. I do not know the exact cause of the problem and being logged as a bug does not necessarily mean that the problem lies squarely with Juicebox but it does mean that it will be investigated further.
I now placed that doLayout(); into just gall03d, but I could not (yet) find any difference between 03c and d. What should I look for?
With the extra doLayout() in place, the gallery should take up all of the browser window. Previously, even though the header was removed from the page, the header's height was still being subtracted from the total height (the initial drawing of the gallery was done before the header was removed) resulting in the gallery not filling the total height available (and there would be an area beneath the gallery equal to the header's height). It might not have been noticeable, especially if the header and gallery background colors were similar.
In landscape mode the top and bottom bars disappear completely, but not in portrait mode. Not that it matters, but why is that?
I think that's just the way that Apple designed Mobile Safari with an easy way to go fullscreen but only in landscape mode (via the arrow icon button in the lower right corner of the bottom toolbar).
There seems to be a problem with being able to scroll down pages containing embedded Juicebox galleries on Windows Phones using Internet Explorer 11.
Unfortunately, I do not have a solution or workaround at the moment but I have notified the developers of this issue.
@Tommy-informatique
Please let me know what mobile devices and browsers (and version numbers) you see the problem in.
The more information I can pass on to the developers, the better.
Thank you.
Your gallery seems to display and function OK on an iPod Touch and I am also able to scroll down the page OK.
Please let me know what mobile devices and browsers (and version numbers) you see the problem in. Thank you.
Also, when scrolling down a page, try to tap in areas other than the gallery. If you initiate a scroll gesture inside the gallery, Juicebox may interpret the tap as the start of a swipe gesture instead and the page may not scroll.
I have no idea if my any of my web pages uses any jQuery code at all.
If you do not know if you are using jQuery (and you create your web pages manually), then you'll not be using it.
If you remove some jQuery functionality from Juicebox in the future, what do I have to do then?
This web page show you how to add jQuery to your web pages: http://www.w3schools.com/jquery/jquery_get_started.asp
With regard to your landscape orientation problem, after the 'header' <div> has been removed from the DOM, the JavaScript code in the setContainerHeight() function can no longer check the height of the 'header' so it is necessary to check whether the 'header' exists before checking its height (or assigning a value of zero if it does not exist).
Just change the line:
headerHeight = $('#header').outerHeight();... to:
headerHeight = $('#header').length ? $('#header').outerHeight() : 0;Also, try running the doLayout() function to resize the gallery after the header has been removed by using the following code:
if (jbGallery.getScreenMode() === 'SMALL') {
$('#header').remove();
doLayout();
}Hopefully this will solve your problem.
The 'assets.png' file was a resource file used to display gallery icons in older versions of Juicebox. It was removed from v1.3.0 when Juicebox introduced vector icon fonts for button icons. Please see the Using Custom Icons support section for further details.
The 'spinner.gif' file is the preloader image, used when an image is being loaded and is not yet ready to be displayed.
You can show or hide the preloader via the showPreloader configuration option in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.
The 'spinner.gif' file can be found in the 'jbcore/classic/img/' folder (of both Juicebox-Lite and Juicebox-Pro galleries).
It sounds like you might want to upgrade your gallery to the latest version (v1.4.3) and re-upload the complete 'jbcore' folder to your web server to be sure that all core Juicebox files are present and correct.
Instructions for downloading the latest version and upgrading existing galleries can be found on the Uprading Juicebox support page.
The color of your image title and caption text is being overwritten by the following code (lines 1803-1807) in your 'style.css' file.
#contentwrap #content .grid_12 p {
color: #000000;
font-weight: normal;
text-align: left;
}As your Juicebox gallery is nested within the containers specified in the CSS code, certain elements in the gallery (such as image titles and captions which are enclosed in <p> tags) have no option but to inherit these CSS rules.
Try adding these CSS rules to only those elements on your web page which require them through use of further CSS selectors (e.g. classes or ids).
What you are seeing on your mobile device is the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user taps the Splash Page, 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".
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE".
If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.
When using the Juicebox module for Drupal, Pro configuration options can be entered in the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings'). For example:
showSplashPage="NEVER"Please note that you have also set your gallery's width to be a fixed value of 900px. The gallery will have this fixed width in all browsers and on all devices.
If your Drupal theme is responsive, then you might like to set your gallery's width to be 100% instead.
The gallery's width should then span the width of its parent container no matter what its size.
@ukblairs
Gumroad should work fine in the UK.
On the payment form, you should be able to select you location/country. Then, as Gumroad says on this support page:
Mailed To - If the product you are looking at is displaying this field, you need to enter your shipping address. If your country does not have ZIP Codes (and most don't) simply enter your Postal Code.
Zip code verification: You may find a pop-up window asking you for your "zip code." When this happens, your credit card provider is communicating with our processing engine, asking us to verify that you are in fact the person using this card. If you don't live in the United States, enter your Postal Code without any spaces. For example, BH13 6BD should be entered as BH136BD.
... so it should work OK. Gumroad are certainly aware that many people will not have a zip code and UK post codes should work fine (although it obviously didn't for some reason in your case). I can only apologize for any inconvenience caused by this.
In any case, I am glad that you have been able to purchase Juicebox-Pro successfully.
Hopefully rony will, too.
@rony
Please let me know how you are getting on (and whether you have tried PayPal's 'Pay with Credit Card' option).
That is the Search Engine Optimization (SEO) code. It does not add any functionality to the gallery itself (the gallery will function fine without it) but it provides code for search engine web crawlers (such as Google) to see in order to index the pages in search results.
For more information, please see here.
SEO content is switched on by default but you can turn it off by going to JuiceboxBuilder-Pro's 'Customize -> Sharing' section and deselecting the 'Add SEO Content' checkbox.
If I've understood correctly, the layout of the SSM pages comes from the "jbcore/full.html" file, which already contains something looking like that.
No. The 'full.html' file is not directly related to Small Screen Mode. It is used to display the gallery (whether in Small or Large Screen Mode) when the gallery is expanded in a new page (rather that on top of the embedding page), for example when expandInNewPage="TRUE" or on iOS devices. (Please see here for further details).
The key to your solution is to use the <meta> 'viewport' tag I posted above.
Try the following example.
Create a sample gallery with JuiceboxBuilder-Pro (just use all default values) and use the following code as the gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jbGallery;
function setContainerHeight() {
var winHeight, headerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight);
$('#juicebox-content').height(newH);
return newH;
}
function doLayout() {
if (!jbGallery) {
setContainerHeight();
return;
}
window.setTimeout(function() {
var winWidth;
winWidth = window.innerWidth ? window.innerWidth : $(window).width();
var newH = setContainerHeight();
jbGallery.setGallerySize(winWidth, newH);
}, 200);
}
$(document).ready(function () {
doLayout();
$(window).resize(doLayout);
jbGallery = new juicebox({
containerid : "juicebox-container",
showSplashPage: "NEVER"
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
margin: 0px;
padding: 0px;
}
a {
color: #cccccc;
}
#header {
background-color: #333333;
height: 20px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#juicebox-content {
width: 100%;
}
</style>
<title>Test</title>
</head>
<body>
<div id="header">
<a href = "gallery1/index.html">Gallery 1</a> | <a href = "gallery2/index.html">Gallery 2</a>
</div>
<div id="juicebox-content">
<div id="juicebox-container"></div>
</div>
</body>
</html>The code is based on the View Resizable Gallery with Top Menu Example sample gallery from the Resizable Gallery support section (but with the external CSS integrated into the page, the footer removed and the <meta> 'viewport' tag from above in place).
This should display the header and gallery without any vertical (or horizontal) scroll bars. The header will be a fixed height and the gallery will occupy the remainder of the browser window. The gallery will initially display the thumbnail page (as showSplashPage="NEVER" is set in the gallery's embedding code) with the thumbnails scaled large due to the <meta> 'viewport' tag.
You could use this page as a template for each of your gallery pages if you like.
If you do not want the header to be displayed on your gallery pages (and just want to use the Back Buttons within the gallery), then you can link directly to gallery 'index.html' files (exactly as they were created by JuiceboxBuilder-Pro) from your 'Go ahead, click one...' page.
If you want the header to be displayed on your gallery pages only in Large Screen Mode (when the gallery is viewed on desktop browsers) but not in Small Screen Mode (on mobile devices), then you could use the Juicebox-Pro API getScreenMode() method to determine which Screen Mode is being used and then use JavaScript (specifically jQuery in the example below) to remove the 'header' <div> from the Document Object Model. In the code above, add the following:
if (jbGallery.getScreenMode() === 'SMALL') {
$('#header').remove();
}... immediately after:
jbGallery = new juicebox({
containerid : "juicebox-container",
showSplashPage: "NEVER"
});Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
That's great!
Thank you for posting back to let me know.
If I thought it was at all possible, I'd be happy to provide some sample code or at least point you in the right direction but it's really beyond the realms of customizing Juicebox.
Although Gallery 3 shows the thumbs without main pics, the style is not SSM, because on iPhone 4 the thumbs are all in one row and incredibly small.
This is Small Screen Mode. Only Small Screen Mode displays thumbnails and images on different pages.
In fact, Small Screen Mode always displays thumbnails and images of different pages and Large Screen Mode never displays thumbnails and images on different pages.
The thumbnails are small due to the scaling of your web page.
As I noted above, try scaling your web page for mobile devices by using the following <meta> 'viewport' tag in the <head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">In your 'Gallery 3', you use 2 different <meta> 'viewport' tags.
Replace your original one with the one above (rather than adding the one above as an additional tag).
Otherwise, set your gallery's width and height to be both 100% (like in your 'Gallery 3b').
This should also trigger the scaling that you are looking for (but only because the gallery's dimensions are not restricted by those of a parent container). The better option is to use the <meta> 'viewport' tag above.
Thank you for the speedy answer.
You're welcome.
I will give it a try and get back to you.
OK. Please do. It works well in my own tests so hopefully it will also work well in your own scenario.
Unfortunately, such a caption position (about 20% down from the top of the image justified to the right side) is not supported.
The caption can be positioned only via the captionPosition configuration option (OVERLAY, OVERLAY_IMAGE, BELOW_IMAGE, BOTTOM, BELOW_THUMBS, NONE).
Trying to change the caption position via CSS would be very difficult to do (if at all possible) and even if you were able to do so, you may run into unforeseen problems when the gallery is redrawn (for example if the user changes the browser window size) as Juicebox would not know of the caption's new position and would expect it to be in one of the official caption positions.
I hope you understand.
That's a good tip, ukblairs. Thank you.
However, it may not be a suitable solution for all users. PayPal have different policies in different countries and users in certain countries (such as Germany) may need to have a PayPal account in order to pay via Credit Card (and not all users have or want to sign up for a PayPal account which is why we introduced Gumroad as an alternative method of payment).
Unfortunately, there are no startAudio() and stopAudio() methods in the Juicebox-Pro API, just toggleAudio().
Also, there is no Juicebox-Pro API event which is fired when the audio is toggled so that you can keep track of whether the audio is playing or not.
However, you could check the 'title' attribute of the Audio Button (which, unless you change the languageList, will be 'Play Audio' when the audio is paused and 'Pause Audio' when the audio is playing) and then use the Juicebox-Pro API method toggleAudio() to stop the audio only if the 'title' attribute is 'Pause Audio'.
To see an example of this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file (changing the audio URLs as appropriate). Click the 'Stop Audio' button to stop the audio.
<!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({
audioUrlMp3: "music.mp3",
audioUrlOgg: "music.ogg",
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
showAudioButton: "TRUE"
});
$(document).ready(function() {
$('#stop').click(function() {
var title = $('.jb-bb-btn-audio').first().attr('title');
if (title === 'Pause Audio') {
jb.toggleAudio();
}
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<input id="stop" type="button" value="Stop Audio" />
</div>
<div id="juicebox-container"></div>
</body>
</html>Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.