You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Where do I put the code?
Just replace your gallery's current embedding code in the 'index.html' file (or whatever HTML file you have embedded your gallery in) with the code above (and rename your audio files as I noted above and place them in your gallery folder alongside the HTML file).
at the top of the config.xml file?
The only modification you should make to the XML file is to remove the audioUrlMp3 and audioUrlOgg entries as they are now being set (randomly) in the embedding code.
Loading each gallery when each new tab is selected should work fine.
Try the following as your 'sample.html' file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css" />
<link rel="stylesheet" href="css/peracon_main.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="preceremony/jbcore/juicebox.js"></script>
<script>
$(function() {
/* $("#tabs").tabs(); */
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
});
function loadGallery(container, base) {
new juicebox({
containerId : container,
baseUrl : base,
galleryWidth: "760",
galleryHeight: "380",
backgroundColor: "rgba(255,255,255,1)"
});
}
$(document).ready(function() {
loadGallery('juicebox-container1', 'preceremony/');
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1" onclick="javascript: loadGallery('juicebox-container1', 'preceremony/'); return true;">Preceremony</a></li>
<li><a href="#tabs-2" onclick="javascript: loadGallery('juicebox-container2', 'ceremony/'); return true;">Ceremony</a></li>
<li><a href="#tabs-3" onclick="javascript: loadGallery('juicebox-container3', 'locations/'); return true;">Locations</a></li>
<li><a href="#tabs-4" onclick="javascript: loadGallery('juicebox-container4', 'reception/'); return true;">Reception</a></li>
</ul>
<div id="tabs-1">
<br />
<div id="juicebox-container1"></div>
</div>
<div id="tabs-2">
<br />
<div id="juicebox-container2"></div>
</div>
<div id="tabs-3">
<br />
<div id="juicebox-container3"></div>
</div>
<div id="tabs-4">
<br />
<div id="juicebox-container4"></div>
</div>
</div>
</body>
</html>First of all, please check that you are using the most recent version of Juicebox-Pro (v1.3.2) to ensure that any bugs that were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, please see the Upgrading Juicebox page for details.
Also, you can check the validity of your web page's code with the W3C Markup Validation Service and fix any HTML errors reported.
Do the first images in the galleries display if you select different images in the gallery and then go back?
If not, then double-check the paths to the first images in each gallery and make sure that the images themselves have been uploaded to the correct locations on your web server.
If the suggestions above do not help, please post the URL to your web page so that I can take a look.
You could try incorporating the solution found in this forum thread into the web page containing your gallery.
This Android Developers Blog page also describes how the default behavior of the long press can be overridden.
To help prevent unauthorized use of your images, you may like to watermark your images (a feature found on the 'Images' tab of JuiceboxBuilder-Pro) as, no matter what precautions you take, you cannot prevent users from taking a screenshot of your gallery.
Also, I would recommend keeping the file size and quality of your images to a level suitable for web gallery use but not high enough for other uses such as printing.
Yes. Do the same for the path to the 'juicebox.js' file.
Change:
<script src="http://www.fastlanetravel.com/flt-gallery/jbcore/juicebox.js"></script>... to:
<script src="/flt-gallery/jbcore/juicebox.js"></script>For now I would like to try the full version Full Browser but don't see how to accomplish this.
I did not notice in the Load Presets the drop down. Is this the only way to do this?
'Full Browser' (rather than 'Embedded') just refers to the size of the gallery being 100% x 100% (taking up the bull browser window by itself). You can set the gallery's dimensions to 100% x 100% (no matter what preset you load from the drop-down menu) in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
After creating a 100% x 100% gallery, just open the gallery's 'index.html' page in a browser to view the gallery on a page of its own taking up the entire browser window.
If you were to embed the gallery in an existing web page alongside other content, then you could allow users to view the gallery fullscreen by setting showExpandButton="TRUE". On clicking the Expand Button on the Button Bar, the gallery will expand to fill the browser window.
I see, I need to link the menu item to the JB gallery page and then add the index.html URL to the home button. Perfect!
Yes. That will work fine.
Everything is great except the home button doesn't show on my phone.
Set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section) to show the Back Button in Small Screen Mode (which is used by Juicebox to display the gallery on small screen devices).
For more information about how Juicebox adapts to different devices and screen sizes, please see here.
Your gallery uses a baseUrl of http://www.fastlanetravel.com/flt-gallery/ but you quoted your web site address as http://fastlanetravel.com/flt-gallery.php (note the use of the 'www' subdomain in the baseUrl).
Your gallery will display fine if you visit your web page using the 'www' subdomain: http://www.fastlanetravel.com/flt-gallery.php
All the Juicebox gallery files must be on the same domain or subdomain as the JavaScript embedding code due to the same-origin policy. Please see this web page for further information.
Changing your baseUrl to use a leading slash to denote your root directory (rather than using an absolute URL with the 'www' subdomain) will work for both fastlanetravel.com and www.fastlanetravel.com.
baseUrl : '/flt-gallery/',A gallery's height can be expressed as either:
(1) an absolute fixed pixel value, or...
(2) a percentage (of the height of the gallery's parent container).
In either case, the size of the gallery (the 'juicebox-container' <div>) will not change depending on the height of the image it is currently displaying.
This is no different than setting the height of any other <div> on a web page.
By default, Juicebox-Pro will display the image as large as possible within the gallery's image area without cropping.
You can change the way that the image is displayed within the image area through use of the imageScaleMode configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) but changing imageScaleMode will not change the height of the gallery.
For example, you could set imageScaleMode="FILL" which will fill the image area but will crop the image if the image and the image area do not have the same aspect ratio.
If you really want to dynamically change the height of the gallery depending on the dimensions of the image being displayed, you could use the Juicebox-Pro API (specifically the onImageChange event and the getGalleryInfo method) to get the URL of the current image.
You could then use JavaScript to get the dimensions of the image and determine the new height for the gallery.
Then, you could set the gallery's height accordingly using the Juicebox-Pro API setGallerySize method.
Here is an sample 'index.html' page which you could modify to suit your needs:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '600',
galleryHeight: '400',
imageScaleMode: 'FILL'
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var image = new Image();
image.src = url;
var height = image.height;
var width = image.width;
var newHeight = Math.floor((600/width)*height) + 95;
jb.setGallerySize('600', newHeight);
}
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>Sorry. I misunderstood your query.
You could generate a random number using JavaScript and set the audioUrlMp3 and audioUrlOgg configuration options in your gallery's embedding code instead of in the XML file.
For example, you could name your audio files 'track1.mp3' and 'track1.ogg', 'track2.mp3' and 'track2.ogg' up to 'track10.mp3' and 'track10.ogg' and then use the following code:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var rnd = Math.floor((Math.random()*10)+1);
var mp3 = 'track' + rnd + '.mp3';
var ogg = 'track' + rnd + '.ogg';
new juicebox({
containerId: 'juicebox-container',
audioUrlMp3: mp3,
audioUrlOgg: ogg
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The Juicebox-Pro API has the getImageCount() method but by the time this method is available to be called, the gallery would already have been displayed and it would be too late to set any configuration options according to the result (without reloading the gallery).
However, you could use JavaScript to parse the gallery's XML file, count the number of <image> entries and set the appropriate configuration options in the embedding code as follows:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var url = "config.xml";
xmlHttp.open('GET', url, false);
xmlHttp.send();
var xmlDoc = xmlHttp.responseXML;
var num = xmlDoc.getElementsByTagName("image").length;
var bool = num > 1 ? true : false;
new juicebox({
containerId: 'juicebox-container',
showThumbsOnLoad: bool,
showSmallThumbsOnLoad: bool,
showThumbsButton: bool,
showSmallThumbsButton: bool
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The JavaScript section will work with both Juicebox-Lite and Juicebox-Pro but the showThumbsOnLoad, showSmallThumbsOnLoad and showSmallThumbsButton configuration options can still be set only in Juicebox-Pro.
This is not possible using Juicebox-Pro alone. Juicebox-Pro supports only a single audio track which can be started and stopped using the Audio Button on the Button Bar.
You would need to find to find a third party audio player (which can be controlled via JavaScript), listen for the Juicebox-Pro API event onImageChange(id) to be fired (which happens each time the main image in the gallery is changed) and use this to trigger a random audio track to be played by the third party audio player.
How can I force it to open the link in the existing window?
Image-specific settings (such as linkTarget) are not stored in preset XML files and it is currently not possible to set the linkTarget entries within the Showkase interface. (This functionality will be introduced in the next version of Showkase although I do not know when it will be released.)
Currently, the linkTarget entries in your gallery's XML file are empty so Juicebox-Pro uses the default value of '_blank'.
You could open the gallery's XML file ('djphoto.com/work1/corporate-events/config.xml') in a plain text editor and change all the linkTarget="" entries to linkTarget="_self".
Is there a way to keep the Title that appears at the lower portion of the picture visible even when the cursor moves away from the large image and thumbnails?
Currently, your caption is positioned on the image overlay (captionPosition="OVERLAY_IMAGE").
You can have the image overlay displayed at all times by setting showImageOverlay="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
Otherwise, you could reposition the caption to somewhere other than the overlay, e.g. captionPosition="BELOW_IMAGE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).
Make sure your 'juicebox.xml' presets file sets imageClickMode="OPEN_URL" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) so that the linkURLs are opened when the user clicks on the main images. Otherwise, the linkURLs will be opened only when the user clicks on the Open Image button in the Button Bar (which your gallery has disabled).
I have viewed your gallery in Safari 5.1.7 (PC) and do not see any shadows on the edge of any of your images.
I have also viewed your gallery in Firefox 22.0 (PC) and your gallery does not display thumbnails.
Try clearing your browsers caches to ensure that your browsers are fetching the most recent gallery files from your web server and are not hanging onto and using older version of your gallery files.
This is not possible in Juicebox-Lite but it is possible in Juicebox-Pro.
If you have a gallery with only one image and would like to hide the thumbnail, set the following configuration options (which will hide the thumbnails and Thumbnail Button (in the Button Bar) in both Small Screen and Large Screen modes).
showThumbsOnLoad="FALSE" (Juicebox-Pro only)
showSmallThumbsOnLoad="FALSE" (Juicebox-Pro only)
showThumbsButton="FALSE" (Juicebox-Lite & Juicebox-Pro)
showSmallThumbsButton="FALSE" (Juicebox-Pro only)I do not know the exact reason behind this issue but it certainly seems to be unique to Mobile Chrome.
I think it is unlikely that this line of code will be included in a future version of Juicebox as we try to keep the 'index.html' file as minimal as possible. Some users may use the 'index.html' file to load the gallery into an <iframe> and may not want the web page to be scaled on mobile devices.
Both the showSplashPage and screenMode configuration options are available in Juicebox-Pro only (and not in Juicebox-Lite).
It is not possible to override the use of the Splash Page on mobile devices in Juicebox-Lite.
For the first gallery on your page, try changing:
<div id="juicebox-container"></div>... to:
<div id="juicebox-container" style="float: left;"></div>This should hopefully position your gallery below your text (without a large gap) and allow you to increase the spacing in your side menu.
Incidentally, you have several <div id="themes"> entries on your web page. Each id on a web page should be unique.
If you need to apply CSS rules to multiple elements, you should use classes instead of ids.
Please see this web page for details.
Also, I would recommend not using universal CSS such as the following in your 'main.css' file.
* {
margin:0px;
padding:0px;
border:0px;
}Such rules will apply to all elements on your web page including those in your galleries. The galleries have no choice but to inherit these rules. Try to apply CSS rules to only those elements on your page which specifically require them through use of classes and ids.
What you are describing is the gallery's Splash Page. (Please see here for further details on how Juicebox adapts to different devices adn screen sizes.)
You can disable 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" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
@ross.tormey
Thank you for posting in the forum. I tried responding to your support email many times over a period of several days but just received "Delivery Status Notification (Failure)" messages.
It looks like the space at the top of your gallery may be caused by some CSS in your 'main.css' file.
I believe the space may be the margin and padding at the bottom of the ol li section.
Notice how the top of the gallery is in line with the bottom of the 'leftNames' <div>.
Open the 'main.css' file in a plain text editor and try changing the following code:
ol li {
font-size:15px;
font-weight: normal;
color:red;
border-bottom:1px solid #ccc;
padding:0 0 15px;
margin:0 10px 15px 0;
color: red;
}... to:
ol li {
font-size:15px;
font-weight: normal;
color:red;
border-bottom:1px solid #ccc;
padding:0 0 0;
margin:0 10px 0 0;
color: red;
}... to see if it makes a difference.
Also, I notice that your web page does not use a Doctype declaration. It is important that each HTML document uses a Docytype declaration in order to inform the user's browser what set of standards the code on your web page should conform to. Add an appropriate Doctype declaration to your page: http://www.w3.org/QA/2002/04/valid-dtd-list.html
From the look of your code, you could use the HTML 5 Doctype. Add the following code to the very top of your HTML page (before the opening <html> tag).
<!DOCTYPE html>Once you have added the Doctype Declaration to your web page, you can check the page for HTML errors (and fix any errors reported) with the W3C Markup Validation Service: http://validator.w3.org/
Using the <meta> 'viewport' tag does, indeed, solve the problem in Chrome on iOS devices and this line of code must be included in the <head> section of the web page into which the gallery is embedded.
do I need to edit index.htm all the time or is there a possibility to automate this workaround?
If you would like this line of code to be included in all 'index.html' files generated by JuiceboxBuilder-Pro (to save you having to manually add it after creating each gallery), you can modify the template file that JuiceboxBuilder-Pro uses to create the 'index.html' files.
Open the following file in a plain text editor: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
... and add the line of code to the HTML document's <head> section.
I notice that you also load jQuery v1.8.2 in your web page (before loading the 'juicebox.js' file).
I have created a test gallery in which I load jQuery v1.8.2, then 'juicebox.js' and then jQuery v1.6.4 and the gallery still displays OK so check the rest of the code on your web page to see if there is perhaps anything else which might be causing your gallery to not display.
Unfortunately, it is likely to be a difficult page to debug (as it loads many external CSS and JavaScript files) and some trial and error may be required.
Try removing elements from your web page, one at a time until the gallery displays OK and you find the cause of the problem.
If you see the Juicebox badge/link in the bottom right corner of your galleries, then your galleries are still Juicebox-Lite rather than Juicebox-Pro.
You can upgrade WP-Juicebox (the Juicebox plugin for WordPress) from Juicebox-Lite (which it comes bundled with) to Juicebox-Pro by following the instructions here.
If you are in any doubt as to whether the existing 'jbcore' folder is being overwritten with the Pro version, try deleting the existing 'jbcore' folder from your web server first before uploading the Pro version in its place.
Try updating the version of jQuery on your web page. The current stable version is v1.10.2. (jQuery v1.6.4 is a couple of years old now.) The 'juicebox.js' file comes bundled with its own version of jQuery and loading an older version of jQuery after loading the 'juicebox.js' file in your web page may cause problems.
The font icons display fine in all browsers I have viewed your gallery in (Firefox 22.0, IE10, Chrome 28, Safari 5.1.7 and Opera 15.0 and in Mobile Safari and Chrome 28 on an iPod Touch).
Do the other font icons (used in the gallery's Button Bar) display OK?
Do all the icon fonts display OK in our demo gallery here www.juicebox.net/demos/pro/full/ ?
I am using windows mobile.
What device and browser/version do you use?
It looks like the mobile version of Internet Explorer bundled with Windows Phone 7 does not support the standard WOFF font format (which Juicebox uses for the gallery icons). Support for this was introduced in Windows Phone 8. Please see this web page for details.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.