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>You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.
It is not possible to have the thumbnail dots (or the thumbnails images) overlay the main image.
Possible values for the thumbsPosition configuration option (which determines the position of the thumbnail dots or images) are TOP, BOTTOM, LEFT and RIGHT (all of which are relative to the main image).
but when i click on the link the juicebox is displayed with the first config.xml file and not the config.xml of the link
I tested your code and it works fine (passing the 'images/2/config.xml' path to your loadjuicebox function) on clicking the link.
Here it is in action in a test gallery.
Make sure that your two 'config.xml' files are not identical.
Please post the URL to your web page so that I can take a look and help further.
Your code looks OK and should work fine as long as all your paths are correct and that you load the 'juicebox.js' file in your web page (as this is not in the code that you posted).
If you continue to experience difficulties, please post back with a description of the problem (does the first gallery display OK, does the second gallery not display when you click the link, are any error messages displayed?) and the URL to your web page so that I can take a look.
Yes. Copy and paste everything between the <!--START JUICEBOX EMBED--> and <!--END JUICEBOX EMBED--> comments (including the <noscript></noscript> tags).
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.