I'm glad that you've been able to resolve your problem.
Thank you for letting me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
I'm glad that you've been able to resolve your problem.
Thank you for letting me know.
Your screenshot looks very strange.
The drop-down menu at the top is missing, there should be a Juicebox logo to the left of 'Start -> Images -> Customize -> Publish' and there should be no "Upgrade to Juicebox-Pro!" link in JuiceboxBuilder-Pro.
It certainly seems that your JuiceboxBuilder-Pro installation is somehow corrupt and I'd recommend a complete uninstallation/reinstallation of both JuiceboxBuilder-Lite (if you have it installed) and JuiceboxBuilder-Pro.
Please follow the procedure below.
(1) Uninstall JuiceboxBuilder-Pro.
Mac: Delete the 'JuiceboxBuilder-Pro' file from the Applications folder and empty your Trash.
Windows: Use the uninstaller in the 'Control Panel -> Programs -> Uninstall a program...' list.
(2) After uninstalling JuiceboxBuilder-Pro, please check that there are no files are left behind (even from a failed installation) by manually deleting the following folders (if they exist) from your hard drive:
Mac:
/Applications/JuiceboxBuilder-Pro.app/
/Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
/Users/Username/Library/Preferences/JuiceboxBuilder-Pro
Windows:
C:\Program Files (x86)\JuiceboxBuilder-Pro
C:\Users\Username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro
C:\Users\Username\AppData\Roaming\JuiceboxBuilder-Pro
C:\Users\Username\Documents\JuiceboxBuilder-Pro
You may need to show hidden files to find some of the above locations in Windows File Explorer.
(3) Also, please follow the procedure above (Steps #1 - #2) for JuiceboxBuilder-Lite, too (if you have it installed).
JuiceboxBuilder-Lite and JuiceboxBuilder-Pro can both be installed and run side by side on the same computer but, being that you are experiencing problems, it might be wise to completely clear your system of all JuiceboxBuilder files before trying to reinstall JuiceboxBuilder-Pro.
(4) Reinstall JuiceboxBuilder-Pro following the instructions here.
(I realise that you are using a Windows PC but I've included notes for Mac above, too, in case any Mac users are experiencing similar issues and are reading this forum thread.)
Hopefully this will help.
I have found your Juicebox "Birds" gallery here http://www.sieg.be/page26.html and it displays and functions fine when I view it in my own browser.
If you are still seeing the "Juicebox Error: Config file not found." message, then try completely clearing your browser's cache before reloading your gallery's web page.
(You could also try viewing your gallery in a different browser (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari) so see if this makes a difference.)
Incidentally, your gallery's web page has stray closing </div> tag (just before the closing </body> tag) which should be removed (but I do not think that this is likely to be causing your problem).
You can check your web page for HTML errors with the W3C Markup Validation Service. Any errors reported should ideally be fixed. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Hopefully clearing your browser's cache will resolve your problem.
I'm glad that you seem to have found the root of your problem. Thank you for letting me know.
Hopefully things will run smoothly for you from now on.
Are such things as .jb-bb-btn-auto-play').click(function() and your CSS class details (e.g. .jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) documented anywhere on the Juicebox website?
No. Such modifications (using internal CSS classes and custom JavaScript) are not officially supported (but you can use them at your own risk).
We support the use of the available Config Options and make available the Juicebox-Pro API, but even the API has limited official support, as noted on the API's support page:
Please note that the Juicebox-Pro API is provided 'as-is' to allow people with JavaScript programming experience to use as required. We cannot offer support for all possible uses of the API.
Sometimes, users request things that are just not possible using the available Config Options and/or the API.
I'm happy to try to provide a solution if I can but sometimes the solution requires some custom code (CSS and/or JavaScript).
Such modifications are not officially supported as there are far too many possible permutations to document/list and using such modifications can often result in unforeseen and unwanted knock-on problems.
One small and seemingly easy request may snowball out of control into a complex coding mess and it's much safer to stick to the available Configuration Options where possible. If you modify a gallery beyond what is possible with the Config Options, Juicebox will have no knowledge of the modifications and this can quite often cause problems (when Juicebox expects something to happen or a gallery element to be in a certain location and this is not the case due to the modifications).
Also, I really have no greater insight into the inner CSS classes of Juicebox than you do.
I just have to rifle through the 'theme.css' file and use my browser's developer tools to try to figure out how to achieve something (like the code I've posted above).
Having said that, you are certainly free to do whatever you like with Juicebox and your web pages (within the Terms of Use and without modifying the 'juicebox.js' JavaScript source code) but just remember that, if you go beyond the Config Options, then you might run into problems that can be difficult to overcome.
The new page build with Juiceboxbuilder PRO don't work ; http://www.sieg.be/birds.html
Unfortunately, the link you provided results in an error 404 (file not found).
Without being able to see the page into which you are trying to embed your gallery, it's very difficult for me to troubleshoot your problem.
As I mentioned earlier, if your 'Birds' folder is a complete Juicebox gallery folder, then the embedding code I provided should work fine in any web page throughout your site without modification. If it does not work, then the problem may be due to factors such as the 'Birds' folder being an incomplete Juicebox gallery folder or permissions issues (with files or folders on your web server being too restrictive).
If you can point me towards the web page that displays the "Juicebox Error: Config file not found." message (so that I can see the problem for myself), I should hopefully be able to help you further.
Thank you, that worked.
That's great! Thank you for letting me know.
Also, I'll try reducing the height to bring the thumbnails closer. Seems to me the thumbnails by default are placed too far from the main image.
It's probably just that your gallery is too tall and that the images cannot be scaled any larger within the gallery without being cropped at the left and right sides (which you could try by setting imageScaleMode="FILL").
Hopefully reducing your gallery's height will help to minimize the space between the images and thumbnails.
Thanks again...
You're welcome!
Try the following.
It's an extension of the original code I posted above so you'll need to make your owm modifications to it.
The additional code detects when the AutoPlay button has been clicked (to turn on AutoPlay) whilst the last image in the gallery is currently being displayed.
var jb = new juicebox({
autoPlayOnLoad: "TRUE",
containerId: "juicebox-container",
showAutoPlayButton: "TRUE"
});
jb.onInitComplete = function() {
var count = jb.getImageCount();
jb.onImageChange = function(e) {
if (e.id === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
window.setTimeout(function() {
alert('Last image in gallery has been reached and 5000ms have elapsed.');
}, 5000);
}
};
$(document).ready(function() {
$('.jb-bb-btn-auto-play').click(function() {
var index = jb.getImageIndex();
if (index === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
window.setTimeout(function() {
alert('AutoPlay button has been clicked on last image in gallery and 5000ms have elapsed.');
}, 5000);
}
});
});
};
I hope that you find the code useful and can implement it into your own website.
What can i do in this instance?
It looks like you should set z-index: 9999; on your .header CSS class.
<style type="text/css">
.header {
z-index: 9999;
}
</style>
This should hopefully solve your problem.
Also is there anyway to control the space between the thumbnails and the main image?
No, at least not directly.
The thumbnails are positioned via the thumbsPosition configuration option and the main images within the gallery are dynamically scaled (within the gallery's image area) via the imageScaleMode configuration option. As such, there is no configuration option available to simply adjust the distance between the thumbnails and the main images.
If you want to reduce the space between the thumbnails and the main images, then try reducing the height of your gallery slightly. (Try a fixed height of '600px' or '800px' initially and see how things look.) The same vertical space as before will be reserved for the thumbnails so, reducing the height of your gallery will result in less height being available for the gallery's image area and there should be less space above and below the main images.
Please see this FAQ for further details.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
I hope this helps.
There's no benefit (as far as the gallery is concerned) to storing the configuration options via one method over the other.
Certain configuration options (for example, those referring to the structure of the gallery) must be used in the embedding code (Embed Options) but all others can be set in either the configuration file or the embedding code (whichever is more convenient).
I'd recommend storing the configuration options in the 'config.xml' file, though (as JuiceboxBuilder does).
This means that if you edit a gallery in the future, you just need to upload the new version of the 'config.xml' file (generated by JuiceboxBuilder) rather than having to manually edit the HTML file that the gallery is embedded into.
I used the code you mentioned above, I changed the src and url to the absolute position of the files,
As long as your 'Birds' directory is a complete gallery folder, then there should have been no need to change any of the paths in the code I posted above. The leading slashes denote your root directory and avoid the need to use absolute paths or calculate relative paths.
Now I see the Juiceboxbuilder frame but there is a message ; Juicebox Error: Config file not found.
When using the baseUrl method of embedding, the gallery's configuration file should be named 'config.xml' and should be located directly inside the gallery folder. If you move or rename the XML file, then you can point towards it with a configUrl entry in your embedding code.
However, your 'Birds' gallery folder seems to include a 'config.xml' file (named and located correctly: http://www.sieg.be/Birds/config.xml) so the code I posted above should have worked fine without modification.
Try using the embedding code I posted above again.
If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.
Once I'm able to see your gallery live on your web server, I should hopefully be able to determine the exact cause of the problem and propose a solution.
In the meantime, please check out this FAQ which might also help.
When I view my gallery I see the message 'Config file not found'. How do I fix this?
When you set a backgroundColor, it is written to the gallery's 'config.xml' file and also included in the gallery's embedding code. As noted here, any configuration options set in the embedding code will take precedence over those set in the 'config.xml' file.
Therefore, if you change the backgroundColor in JuiceboxBuilder-Pro and upload only the modified 'config.xml' file but still have a backgroundColor included in the gallery's embedding code, then it is this backgroundColor (from the embedding code) that will be used in the gallery.
Be sure to change the backgroundColor in your gallery's embedding code and all should be well.
If, after changing the backgroundColor in your gallery's embedding code, you still do not see your chosen color, then try clearing your browser's cache before reloading your web page to be sure that your browser is using the most recent versions of your gallery files.
Also, please note that if you are expanding a gallery from a Splash Page (for example in Small Screen Mode), then the gallery will only ever be visible in its expanded mode so you will see only the expandedBackgroundColor.
I hope these notes help to clarify things.
If your 'Birds' directory is a complete gallery folder, then you can use the baseUrl method of embedding documented here.
You can use the following embedding code to embed your 'Birds' gallery into a web page.
<!--START JUICEBOX EMBED-->
<script src="/Birds/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/Birds/",
containerId: "juicebox-container",
galleryWidth: "800",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
The leading slashes in the paths above denote your root directory so the code above will work in any web page throughout your website without modification.
I want to place this code into an iFrame, like all the rest on my website
I would recommend that you embed your gallery directly into a web page (like in the example above) as there are drawbacks to using an iframe. Please see here for details (scroll down to "2) Using an iframe").
However, if you really want to load your gallery into an iframe, upload the complete gallery folder (including the gallery's 'index.html' file) to your website and load the gallery's 'index.html' file into your iframe (i.e. use the path to the gallery's 'index.html' file as the 'src' attribute in your iframe).
The 'index.html' file appears to be missing from your 'Birds' directory at the moment (or has permissions that are currently too restrictive), but, assuming it is there and readable, you could use an iframe such as:
<iframe src="/Birds/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>
I hope this helps.
I still have no issue displaying your gallery in my own browsers (with empty caches).
All images in your gallery load quickly and completely for me.
The gallery is generated by the 'juicebox.js' JavaScript file. Essentially, Juicebox reads the imageURL data from the 'config.xml' file and displays the images via dynamically generated <img> tags (scaling the images according to the imageScaleMode value).
I see no problem with your gallery online and the variable factors in the equation are our respective internet connections and computers/browsers. The gallery itself on your web server seems fine and works for me so it appears that the problem lies either with your internet connection or computer/browser.
Unfortunately, I cannot explain why some images do not load for you. If your browser's developer tools suggest that the images are timing out before loading completely, then this sounds like a network connection problem.
Even if the problem was a JavaScript one (which seems unlikely as you are the only user to have reported such a problem), there is little that could be done as the 'juicebox.js' JavaScript file is obfuscated and cannot be modified.
Do you see the same problem with any (or all) of our demo galleries online here?
Do you see the problem in all browsers (Edge, Chrome, Firefox, Internet Explorer, Opera, Safari) or just certain ones?
Have you tried temporarily disabling any browser extensions that you may have installed in the browser(s) that demonstrate the problem?
Juicebox does not have a debug mode (at least, not in the sense that you would need).
You can set debugMode="TRUE" in your gallery's 'config.xml' file (as noted here) but this just allows you to set configuration options via a query string in the URL (please see here for details) without needing to edit the gallery's HTML or XML files.
As you have mentioned 3G/4G, please also see this FAQ (although it sounds like you may already have switched 'no-transform' on).
Why can't I view my gallery on a 3G mobile connection?
captionBackTopColor is actually the only configuration option which has different default values for Large Screen Mode (rgba(0,0,0,0)) and Small Screen Mode (rgba(0,0,0,0.3)) so if you do not change captionBackTopColor in JuiceboxBuilder-Pro's interface, a captionBackTopColor value will not be written to the gallery's configuration file and the two default values will be used (which, when combined with the default value for captionBackColor, gives a gradient background in Large Screen Mode and a solid background in Small Screen Mode).
If you want to ensure that a single captionBackTopColor is used in both screen modes, then change its color or opacity slightly from its default value. This will ensure that a captionBackTopColor entry is written to the gallery's 'config.xml' file and the chosen value will be used in both Large Screen Mode and Small Screen Mode. Then, to remove the gradient, set captionTopColor to exactly the same color and opacity as you've used for captionBackTopColor.
You can make the caption area's background fully transparent by setting the Opacity to '0' for both the Caption Back Color and the Caption Back Top Color (in JuiceboxBuilder-Pro's 'Customize -> Color' section).
If manually editing your gallery's 'config.xml' file, set captionBackColor="rgba(0,0,0,0)" and captionBackTopColor="rgba(0,0,0,0)".
Please note that Juicebox-Pro uses only one captionBackColor and captionBackTopColor gallery-wide so the values you set will be used in both Small Screen Mode and Large Screen Mode.
First of all, if you have any security software installed (e.g. Avast, AVG, etc.), please make sure that the program itself and its database are both up to date.
If this does not help, then try completely disabling your security software (at your own risk) or make an exception for the JuiceboxBuilder executable file to see if this makes a difference.
We've had a couple of Avast users report similar symptoms to those that you describe. However, I contacted Avast and they say that they cannot replicate the problem with the latest version of their software (v18.3).
If this does not help, then, with JuiceboxBuilder-Pro closed, please check to see if the following folder exists on your system:
C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery
If there is a .tempGallery folder in this location, please delete it manually.
The .tempGallery folder is created automatically by JuiceboxBuilder for internal use only (for the live preview window and as a temporary gallery folder until the gallery is saved on the 'Publish' tab).
It should automatically be deleted by JuiceboxBuilder-Pro on closing the application but, if this fails, it has been known to render the 'New Gallery...' and 'Open Gallery...' buttons inactive.
The only way that I've been able to replicate the symptoms that you describe myself is to save a gallery to a Google Drive folder (so I'd recommend not saving a gallery to a location which is being synced to an online file sharing service) and the problem seems to be due to a persistent .tempGallery folder (which has not been removed as expected).
You may not be using a Google Drive folder but a persistent .tempGallery folder might still be causing a similar problem.
Hopefully my notes above will help.
When JuiceboxBuilder-Pro resizes images for a gallery, it converts PNG images into JPEG images and any transparent regions are rendered as black. Unfortunately, transparency is not retained in images resized for a gallery and it is not possible to pick the color for transparent regions.
The best thing to do would be to resize your images (as PNG images with transparency) in an imaging program (such as Adobe Photoshop) prior to using JuiceboxBuilder-Pro.
In JuiceboxBuilder-Pro's interface, deselect the 'Resize Images' checkbox (on the 'Images' tab) to prevent JuiceboxBuilder-Pro from further processing your images and your source images will be copied across to the gallery's 'images' folder (with transparency intact).
I hope this helps.
Hi, must each gallery be contained in it's own folder?
Each gallery must have a unique 'config.xml' file which stores the gallery's configuration options and image data, but there is no need to keep each gallery self-contained in an individual folder (although it can certainly help to keep things organized on your web server). You can point towards a gallery's 'config.xml' file (in any location you like) using a configUrl entry in the gallery's embedding code.
If so, is there an easy way to share common assets across galleries?
The only file within the 'jbcore' folder which may change from gallery to gallery is the 'pswd.php' file which contains the password for a gallery (if you choose to password-protect it).
Please see the Password Protection support section for details.
If you do not want to password-protect your galleries (or if you are happy to use the same password for all your galleries), then all your galleries can share a single instance of the 'jbcore' folder (rather than having an individual 'jbcore' folder for each gallery).
If you'd like to do this, then please see the Using an External jbcore Folder support section for details.
Essentially, all you need to do is upload a single 'jbcore' folder to somewhere on your web server and make sure that the 'juicebox.js file (from within the 'jbcore' folder) is loaded via a <script> tag on every web page which contains a gallery.
If all your galleries share a single instance of the 'jbcore' folder, then you can upgrade all your galleries at once (for example, when a new version of Juicebox-Pro is released) simply by swapping your single 'jbcore' folder for a new version.
Awesome! Thanks for letting me know!
Open the template file that JuiceboxBuilder-Pro uses to generate the gallery's 'index.html' file and change the <title> there (so that your custom text appears as the <title> in all 'index.html' pages generated by JuiceboxBuilder-Pro).
Open the following file in a plain text editor:
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/index.html
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
Now, scroll down to line 4 and change:
<title>%%TITLE%%</title>
... to:
<title>Tony Gamble Photography</title>
@haggis999
The rollover tooltip-text within a gallery is configurable via the languageList configuration option.
Please see the International Gallery Text support section for details.
This configuration option was intended to be used to translate the text into a different language but you can use to simply change the text if you like.
It is not available in the JuiceboxBuilder-Pro interface but you can add a custom languageList to your gallery's 'config.xml' file, as an attribute to the opening <juiceboxgallery> tag, alongside the other configuration options.
If you want to change "Expand Gallery" to "Hide Menu" and "Close Gallery" to "Show Menu", then you can use the following:
languageList="Show Thumbnails|Hide Thumbnails|Hide Menu|Show Menu|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of|Send Email|Download|Password|Incorrect Password.|Regarding image|in gallery"
The text displayed in the browser tab comes from the contents of the <title> ... </title> tag (in the <head> section of your web page).
If you create a gallery with JuiceboxBuilder-Pro, then the application uses the Gallery Title for the <title> tag in the gallery's 'index.html' file.
However, you can open any HTML web page in a plain text editor and manually edit the page's <title> to whatever you like.
Just search for "<title>" (there should be only one entry in each web page) and change the text between the opening and closing <title> and closing </title>.
@haggis999
Thank you for all your suggestions!
The result is that many of my captions are being unnecessarily wrapped to four lines, made much worse by the fact that Juicebox only shows three of those lines!
Just in case it helps (and for anyone else reading this), when captionPosition is set to OVERLAY or OVERLAY_IMAGE, the height of the caption area is variable (it will increase, if necessary, to accommodate long captions) up to a maximum value set via maxCaptionHeight (default value, 120px). When captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the height of the caption area is fixed at the maxCaptionHeight value. Either way, maxCaptionHeight can be increased to accommodate long captions.
I'm glad you've got it working! Thank you for letting me know.
Incidentally, there should have been no need to delete any data within WP-Juicebox.
All you need to do to upgrade the plugin from Juicebox-Lite to Juicebox-Pro is to replace the plugin's Lite 'jbcore' folder with the Pro version from the Juicebox-Pro v1.5.1 download zip package ('juicebox_pro_1.5.1/web/jbcore').
You can do this before or after the plugin has been uploaded to your web server.
You could actually swap out the entire plugin (which you might do when the plugin is updated) without affecting any galleries or plugin settings. No custom data is stored within the plugin's directory. All custom gallery settings are stored in XML files in the 'wp-content/uploads/juicebox/' directory and all custom plugin settings are stored in the WordPress database.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.