You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The problem may be that your gallery's baseURL is defined as: baseUrl: "http://www.globaltv.com/js/gallery/"
... but you are accessing your web site via globaltv.uat.smdg.ca
Try storing all the gallery files on the same domain/subdomain (setting baseUrl: "http://globaltv.uat.smdg.ca/js/gallery/") to see if this helps.
Also, are you able to try without using the PhotoAlbum wrapper to see if this makes a difference?
Have you uploaded your gallery files (the contents of your gallery folder) to your website (Step #2 in the embedding instructions here)?
As long as you have FTP access to the web space that Homestead provides you with, then I would recommend using the baseUrl method of embedding as documented here. This would allow you to upload your complete gallery folder (not just the contents) to your website. It would not matter where on your website you upload your gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
If you do not have FTP access to your Homestead website, then you will need to host your gallery elsewhere (such as Dropbox) and load your gallery into an iframe, following the 'Embedding in a Web Template Site' instructions here.
If you like, you could post the URL to your gallery's web page and I should be able to tell you the reason why your gallery is not currently being displayed.
The sharing buttons are always part of the Button Bar and your galleries set buttonBarPosition="NONE" so the sharing buttons are not displayed. Try setting buttonBarPosition="TOP" instead and your sharing buttons will be visible.
Your Juicebox gallery displays fine if you go to simkens.eu but not if you go to www.simkens.eu.
This is because the paths in your gallery's embedding code are absolute and use the simkens.eu domain rather than the www.simkens.eu subdomain.
All gallery files must be on the same domain or subdomain as the HTML page containing the JavaScript embedding code due to the same-origin policy. Please see here for further details.
Use relative paths in your gallery's embedding code (instead of absolute paths) and your gallery should display on both simkens.eu and www.simkens.eu.
Try the following:
<!--START JUICEBOX EMBED-->
<script src="/2014_01_frahan/jbcore/juicebox.js" type="text/javascript"></script>
<script type="text/javascript">
new juicebox({
containerId: 'juicebox-container',
baseUrl: '/2014_01_frahan/',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->(The leading slash in the paths denotes your root directory.)
Certain browsers (IE11, Chrome and Opera) have security restrictions which prevent the loading of XML files (like the one used by Juicebox to store the configuration options and image data) locally (on your own computer). Unfortunately, there is nothing that can be done to circumvent this behavior. (It would appear from your post that CodeLobster's own built-in browser does not have such a restriction.)
Please note that this happens only when trying to load galleries locally (from your own hard drive) and does not happen once galleries have been uploaded to a web server.
We already have Juicebox FAQs for Chrome and Opera and will add one for IE11 in the next site update. (It was previously possible to preview galleries locally in IE10 but not now in IE11.)
However, it should be possible to preview galleries locally in Firefox and Safari (and I can do so with Firefox 27.0 and Safari 5.1.7 on my own PC).
If your gallery still does not display or function correctly when uploaded to your web server, then please post the URL to your gallery so that I can take a look for myself and help further.
It is not currently possible to synchronize the AutoPlay functionality with that of the Audio playback using the available configuration options.
It is also not possible to do so easily using the available Juicebox-Pro API methods and events. Ideally, you would listen for the AutoPlay (or Audio) button to be toggled by the user and then programatically toggle the Audio (or AutoPlay) button but there is no such event in the Juicebox-Pro API which could be used for this purpose. (New API events such as onAutoPlay(advancing) or onAudio(playing) would need to be introduced.)
It is also not possible to change the core functionality of Juicebox to achieve this as Juicebox does not come with source code and the 'juicebox.js' file (where all the logic is housed) is packed and obfuscated and cannot be modified. Please see this FAQ for details.
You could create your own HTML link (or button) outside the gallery and, when clicked, you could fire the Juicebox-Pro API methods toggleAutoPlay() and toggleAudio() together. However, it would be very difficult to keep the two features synchronized. You would need to ensure that the user could not manually switch either of these features off individually. Any manual image navigation (via navigation arrows, thumbnail selection or keyboard controls) would switch AutoPlay off (but the Audio would continue to play).
You would need to disable all manual navigation (using configuration options) and disable keyboard controls (using JavaScript).
The following is the closest I can get to achieving your goal.
Create a sample gallery in JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the following code (using your own audioUrlMp3 and audioUrlOgg values).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<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',
autoPlayOnLoad: 'FALSE',
containerId: 'juicebox-container',
enableAutoPlay: 'TRUE',
galleryHeight: '400',
galleryWidth: '600',
imageClickMode: 'NONE',
playAudioOnLoad: 'FALSE',
showAudioButton: 'FALSE',
showAutoPlayButton: 'FALSE',
showImageNav: 'FALSE',
showNavButtons: 'FALSE',
showSmallThumbsButton: 'FALSE',
showSmallThumbsOnLoad: 'FALSE',
showThumbsButton: 'FALSE',
showThumbsOnLoad: 'FALSE'
});
jb.onInitComplete = function() {
document.getElementById('juicebox-container').firstChild.removeAttribute('tabIndex');
};
$(document).ready(function() {
$('#toggle').click(function() {
jb.toggleAudio();
jb.toggleAutoPlay();
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<input type="button" id="toggle" value="Toggle Audio and AutoPlay">
</div>
<div id="juicebox-container"></div>
</body>
</html>I hope this helps.
Please feel free to post suggestions for future versions in the Feature Requests forum thread.
It keeps them all together and ensures that they are not overlooked.
If you are using WP-Juicebox (the Juicebox plugin for WordPress) and are using the Media Library as a source of images, then you can reorder images by doing the following:
(1) Edit the page or post containing the gallery.
(2) Click the 'Add Media' button above the editor.
(3) Go to the 'Insert Media -> Media Library' section.
(4) Select 'Uploaded to this post'.
(5) Images can be dragged and dropped into a new custom order.
(6) Close the media window when done.
You can quickly and easily reverse the order of images in a Media Library-sourced gallery by doing the following:
(1) Go to the 'WP-Juicebox -> Manage Galleries' page (from the Dashboard).
(2) Edit the gallery.
(3) Change the 'Image Order' from 'Ascending' to 'Descending' (or vice versa).
(4) Click the 'Save' button.
Will a WordPress page require an iFrame?
No. You can use the baseUrl method of embedding as documented here.
From what you say and my own tests, it looks like an upgrade to PHP might solve the problem.
However, in order to determine the exact cause of the problem, I would need to run a few tests on PHP v5.2.17.
If you are willing to give me access to your web server (FTP login details) then please let me know and I will send you an email address so that you can pass them on to me.
Each single-site license allows you to:
(1) Upload your Juicebox-Pro galleries to a single website domain.
(2) Install JuiceboxBuilder-Pro (the desktop application to create and edit galleries) on up to 3 computers.
These computers can be anywhere you like. For example, you could have a desktop and a laptop at home and another computer at work.
With a single-site license, you would be able to create and edit Juicebox-Pro galleries (using JuiceboxBuilder-Pro) on 3 different computers but you would still be able to upload the galleries to only one website domain.
Is there a basic error in the html construction?
No. It looks like your galleries are fine.
Can the execution of the juicebox gallery be blocked by the internal firewall?
First of all, please check that JavaScript is enabled in your browser.
It is certainly possible that your company intranet is blocking JavaScript files. Please check with your IT department to see if this is the case. (Your galleries display and function fine when I view them myself.)
(1) Yes.
(2) No. The Juicebox branding (link/badge at the bottom-right corner of the gallery) is present in all Juicebox-Lite galleries and can be removed only by purchasing Juicebox-Pro.
If you like, Juicebox-Pro can be purchased from this web page.
There are many other benefits to using Juicebox-Pro. A comparison chart between the features of Juicebox-Lite and Juicebox-Pro can be found on the download page (link above).
Did you try the modification I suggested? Did it help?
I think your problem is likely to be PHP related but even if there is a bug in v5.2.17, there is likely to be a workaround (although I would need access to a server running PHP v5.2.17 in order to run a few tests).
I do not know for sure that a PHP bug is the cause of your problem but going directly to http://etcillustration.com/wp-content/p … llery_id=1 confirms that a plugin or theme conflict is not the issue and the only other differences between your instalation and my own are the server itself and the version of PHP installed (and, as you say, it worked OK for you when using PHP 5.4.17).
If you have not yet tried my suggestion above, please give it a go and see if it helps.
A Juicebox gallery loaded into an iframe which displays OK in one browser should also display OK in other browsers.
Does the gallery display OK when you view it's 'index.html' page in Internet Explorer directly from your Dropbox public folder?
Does it fail only when you view it within your Tumblr post?
Also, what version of Internet Explorer are you using?
Please post the URL to the Tumblr post containing your gallery so that I can take a look and help further.
In the meantime, please see this FAQ which deals with the 'Config XML file not found' message:
When I view my gallery I see the message 'Config XML file not found'. How do I fix this?
Unfortunately, I cannot replicate this problem (using servers with PHP 5.3.8 and PHP 5.4.21).
However, I do not believe your problem is related to permissions or a conflicting plugin or theme.
It sounds like a PHP-related issue (perhaps a bug in PHP 5.2.17).
Try changing line 121 of the 'wp-juicebox/config.php' file from:
echo $dom_doc->saveXML();... to:
echo $dom_doc->saveXML($settings_tag);WP-Juicebox uses saveXML() with no arguments which, according to the PHP documentation, should output the entire document (and does in my own test galleries).
However, in your case, nothing is output at all so instructing saveXML() to output just a specific node (as in the modification above) may help.
if it's possible to have Juicebox produce an embedded gallery featuring only thumbnails
If you set screenMode="SMALL", then Juicebox will display the gallery in Small Screen Mode (on all devices and in all browsers). The user will be presented with a grid of thumbnails from which a main image can be selected (by clicking on the representing thumbnail). The user can return to the thumbnail page via the Thumbnail Button on the Button Bar.
For more information on Juicebox and Screen Modes, please see here.
Please note that when a user selects a main image, the gallery will not expand to fill the browser window.
If you would like the gallery to expand when a thumbnail is clicked from a Small Screen Mode thumbnail page, you could use the available Juicebox-Pro API methods and events.
To see this in action, create a sample gallery in JuiceboxBuilder-Pro and replace the gallery's index.html' page with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
var jb = new juicebox({
containerId: 'juicebox-container',
galleryHeight: '400',
galleryWidth: '600',
screenMode: 'SMALL',
showExpandButton: 'TRUE',
showSmallThumbsButton: 'TRUE',
showSmallThumbsOnLoad: 'TRUE',
showSplashPage: 'NEVER'
});
var fullscreen = false, 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 = !thumbs;
};
</script>
<div id="juicebox-container"></div>
</body>
</html>Otherwise, you could perhaps using the Splash Page (by setting showSplashPage="ALWAYS") to display a placeholder image for the gallery which, when clicked, will expand the gallery to fill the user's browser image.
By default, Juicebox-Pro uses the first image in the gallery as the Splash Page Image but you could construct a composite image from several gallery images and instruct Juicebox to use this instead (using the splashImageUrl configuration option).
For reference, the Splash Page configuration options can be found here.
Does this mean that a jQuery library of some sort is actually bundled inside of juicebox.js itself?
Yes. The 'juicebox.js' file contains its own version of jQuery so there is no need to include jQuery separately in a gallery's web page for a Juicebox gallery to function correctly.
If your own web page uses jQuery for other things , it would be wise to include the current stable version of jQuery in your web page rather than relying on the version bundled within 'juicebox.js' (which may not contain all the jQuery functionality your web page requires).
I notice that your entire web page is blank (not just the Juicebox gallery) when viewed in IE8 and IE9.
It is unlikely that the gallery itself is the problem. (Juicebox is compatible with IE8 and IE9.)
First of all, check the HTML code on your web page with the W3C Markup Validation Service and fix the errors reported. (There are currently 31 errors and 1 warning, many of which seems to be end tags for elements which are not open.)
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.
If this does not help, then some trial and error may be required to figure out why your page is not displaying in IE8 and IE9.
Try temporarily removing sections of your web page (such as sections of JavaScript) and check the web page afterwards to see if you can find the cause of the problem.
You can see how your web page looks in IE8 or IE9 using the emulation mode in IE11 (hit F12, scroll down to the Emulation section and change the Document Mode) or use IETester.
Many thanks for providing the sample gallery.
I have been able to replicate the problem in a test gallery and have logged a bug report.
The problem is that Juicebox uses jQuery and jQuery does not include XDomainRequest support. Please see this jQuery bug report for further details.
The easiest way to integrate a Google Font into the Juicebox plugin for Lightroom would be to:
(1) Choose the Google Font you want to use from http://www.google.com/fonts
... click the 'Add to collection' button and then click the 'Use' button to get the code you need.
(2) Open the plugin's 'index.html' template file ('juicebox.lrwebengine/index.html') in a plain text editor and add the Google Font standard or JavaScript code to the <head> section of the 'index.html' file.
(3) Use the Juicebox-Pro configuration option galleryFontFace (setting its value to the name of the font you have chosen) in the embedding code, e.g. galleryFontFace: 'Rock+Salt'
The modified 'index.html' file should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= model.nonCSS.jb_galleryTitle %></title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
<% if mode == 'preview' then %>
<script type="text/javascript" src="resources/js/live_update.js"></script>
<% end %>
<style type="text/css">
body {
margin: 0px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
</head>
<body>
<%
function rgba(hex, opacity)
hex = hex:gsub("#", "")
r = hex:sub(1, 2)
g = hex:sub(3, 4)
b = hex:sub(5, 6)
return "rgba(" .. tonumber(r, 16) .. ", " .. tonumber(g, 16) .. ", " .. tonumber(b, 16) .. ", " .. opacity/100 .. ")"
end
%>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
backgroundColor: '<%= rgba(model.nonCSS.jb_backgroundColor_, model.nonCSS.jb_backgroundOpacity) %>',
containerId: 'juicebox-container',
galleryHeight: '100%',
galleryWidth: '100%',
galleryFontFace: 'Rock+Salt'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>Now, all galleries created by the plugin will use your chosen Google Font as the gallery font.
I'm glad it worked for you!
Thank you for posting back to let me know.
It looks like your web page may use the border-box model and this is known to break the layout of Juicebox.
Try opening your gallery's 'jbcore/classic/theme.css' file in a plain text editor and add the following code to the file.
.juicebox-gallery a, .juicebox-gallery div, .juicebox-gallery h1, .juicebox-gallery h2, .juicebox-gallery h3, .juicebox-gallery h4, .juicebox-gallery p, .juicebox-gallery span, .juicebox-gallery u {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}Hopefully this will solve your problems.
This issue has been addressed and will be fixed in the next version of Juicebox.
If you would like to be notified when a new version is released, please join our mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.
I don't know what I want - this was simply the code I copied from JB - in the hope that it would give me in Lightroom the gallery I had created in standalone JB
If you want to replicate the layout of a gallery created in JuiceboxBuilder-Pro in Lightroom, then, rather than enter configuration options into the Pro Options text area of the Lightoom plugin's interface, you could:
(1) Create a sample gallery the way you want it to look in JuiceboxBuilder-Pro.
(2) Save the settings as a preset ('Presets -> Save Preset...' from the drop-down menu at the top).
(3) Create your new gallery in Lightroom.
(4) Open the gallery (created in Lightroom) in JuiceboxBuilder-Pro and apply the preset to it ('Presets -> Load Preset...').
(5) Save the gallery on the 'Publish' tab.
how do I know what I need to put into the Lightroom box?
A list of all configuration options you can use can be found here.
Step #4 in the 'Upgrading to Juicebox-Pro' section on the Lightroom plugin's web page tells you how you should enter Pro Options into the Pro Options text area, for example:
captionPosition="BELOW_IMAGE"URL is: janesharp.com/galleries/Sarah_Lamond_JB I noticed that JB did not create a index.html file - is that why?
JuiceboxBuilder-Pro and the Lightroom plugin always create an index page. This is the page into which the gallery is embedded. Without this, there is no embedding code and no way for the browser to display the gallery.
When using the Lightoom plugin, the index page is always named 'index.html'.
When using JuiceboxBuilder-Pro, you can change the name of the index page if you like (on the 'Publish' tab), although the default name for the file is 'index.html'. No matter what you call the file, there will be only one HTML file within the gallery folder so upload it to the '/galleries/Sarah_Lamond_JB/' directory on your web server and open it in a browser.
It looks like all the other gallery files have been uploaded OK so with your gallery's index page in place, the gallery should display fine.
As you have discovered, if a Juicebox gallery is sourced by Flickr images, then the gallery will automatically display any new images added to the Flickr account (or set) without the need to modify any gallery files.
I just get a white spinning hexagon with a teardrop inside.......... and suggestions why?
This is most likely to be due to an incorrectly formatted gallery XML file.
the code is simply:
optionName="galleryWidth: "100%"
optionName="galleryHeight: "100%"
optionName="backgroundColor: "rgba(204,204,204,.2)"The Juicebox plugin for Lightroom automatically sets the gallery's width and height both to 100% (to display the gallery on a page of its own, filling the page) and it is not possible to change these values in the interface.
If you want a gallery with different dimensions, then you will likely be embedding the gallery in an existing web page alongside other content and should follow the embedding instructions here.
Also, the background color and opacity can be set in the interface (in the 'Color Palette' section) without the need to enter the values manually in the 'Pro Options' text area.
Other options should be entered into the text area in the form optionName="OPTION_VALUE" as in the following example:
captionPosition="BELOW_IMAGE"
showNavButtons="TRUE"I've also just been using standalone juicebox - and so have just discovered that you cannot ftp from the software,
JuiceboxBuilder-Pro does not feature FTP capabilities but with a dedicated FTP program such as Filezilla (free), you can drag and drop a complete gallery folder into a location on your web server in a single action.
And i've just uploaded a gallery built in JB via an ftp programme and it doesn't work. I've uploaded everything in the gallery folder.
Please post the URL to your gallery so that I can take a look for myself and determine the cause of your problem.
In the meantime, perhaps the troubleshooting FAQs will help.
That's great!
Thank you for posting back to let me know.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.