I think all you might need to do is add the following line of code at the very end of (but still inside) your foreach loop:

$xmlRoot->appendChild($image);

This should create a valid XML file with correct opening and closing <juicbeboxgallery> tags and no need to perform any string manipulation on the resulting file.

1,077

(3 replies, posted in Juicebox-Pro Support)

Your gallery images actually look OK in Edge to me.
I do not see any significant difference between the display of your gallery images in Chrome and Edge.

As your images should fit within your gallery's image without any dynamic scaling required, try turning of Juicebox-Pro's dynamic scaling (at least temporarily for testing purposes) to see if this makes a difference.
Set imageScaleMode="NONE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

I've not checked the exact dimensions of all your images but if there is any reason for Juicebox-Pro to dynamically scale an image, you might still find that increasing your image resolution will help. You might find that a 1024 x 768 image being scaled down to fit within your 600 x 600 gallery might look better than a 610 x 400 image (for example) being scaled down to fit within the same area.

Hopefully either setting imageScaleMode="NONE" or increasing your image resolution (but not both at the same time) will help.

1,078

(496 replies, posted in Juicebox-Pro Support)

@pantau

You could add the custom CSS to the template file that JuiceboxBuilder-Pro uses to generate the gallery's 'theme.css' file.
In doing so, the custom CSS will be included in all galleries created by JuiceboxBuilder-Pro.
Open the following file in a plain text editor and add the custom CSS to the bottom of the file.
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/jbcore/classic/theme.css
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\classic\theme.css

1,079

(6 replies, posted in Juicebox-Pro Support)

I tested my suggestion on Windows 10 before I posted and it works for me.
I'm sorry to hear that it does not work on Windows 7 for you (but I expect this will be the case for all Adobe AIR applications).
Is your version of AIR up-to-date (v29.0)? If not, maybe upgrading it will help. You can download the latest version of AIR from here.
Unfortunately, I do not think that there is much else you can do (other than perhaps upgrade to Windows 10 but I'm sure there are reasons why you are still using Windows 7).

1,080

(496 replies, posted in Juicebox-Pro Support)

@pantau

Possibility to adjust caption font size...

There are currently no configuration options available to change the image title and caption font sizes (thank you for the suggestion) but it is still possible to do so (via HTML formatting or custom CSS).
Please see this forum post for details.

Juicebox Error: Config file not found.

If you encounter the "Config file not found." message whilst trying to view a gallery locally (from your computer rather than from your web server) in Safari 11, then please see this forum post for a full explanation and a workaround.

Unfortunately, Safari 11 (released 19 September 2017) introduced a security restriction which prevents local viewing of Juicebox galleries by default. This issue is specific to viewing galleries locally (from your computer's hard drive) and there is no such issue once the galleries have been uploaded to a web server (where they can be viewed in any modern browser).
Selecting 'Disable Local File Restrictions' from Safari 11's 'Develop' menu (full instructions in the link above) should, once again, allow you to view your galleries locally in Safari 11.

More general information on the "Config file not found." message can be found in this FAQ:
When I view my gallery I see the message 'Config file not found'. How do I fix this?

JuiceboxBuilder-Pro wanted to use information stored in "Adobe.APS" in the keychain, but the keychain did not accept my password.

Please see this forum thread. Hopefully the links and suggestions will help.
(Deleting the ~/Library/Application SupportAdobe/AIR/ELS/JuiceboxBuilder-Pro folder has certainly helped other users experiencing a similar problem but maybe the other suggestions in the forum thread will help.)

1,082

(6 replies, posted in Juicebox-Pro Support)

There's no way to specifically change the font size in JuiceboxBuilder-Pro's interface.
You could, however, change the scale of your computer's display.
If you are using Windows 10, then you could "Change the size of text, apps, and other items" in 'Settings -> System -> Display -> Scale and layout'. You could try changing the value from 100% to something like 125% (even temporarily whilst using JuiceboxBuilder-Pro).

1,083

(3 replies, posted in Juicebox-Pro Support)

I notice that your images are of quite a low resolution. (The first image in your gallery is only 600px x 420px.)
Try increasing the resolution of your gallery images. The default resolution for gallery images when using JuiceboxBuilder-Pro to create a gallery is 1024px x 768px (over 3 times as many pixels as your current first image).

Don't worry about your images being too large for your gallery. Your gallery uses the default value for the imageScaleMode configuration option (SCALE) so Juicebox-Pro will dynamically scale down large images so that they fit within the gallery's image area (whilst respecting their aspect ratios and without cropping).

When allowing JuiceboxBuilder-Pro to resize images for a gallery at the default resolution (1024px x 768px) and quality (80%), the resulting images should have a filesize of around 120KB so the images should take no longer to load than your current images.

Just increase your image resolution slightly and you might also like to try bumping up the quality a little (try 90%).
This should help.

1,084

(24 replies, posted in Juicebox-Lite Support)

If you follow the regular Embedding in a HTML Page instructions, you'll need to:

2. Copy the entire contents of your Juicebox gallery folder into the folder that contains your HTML page.

This means that you need to upload the gallery files to your web server, usually using a dedicated FTP program such as Filezilla.
Please check with SiteSpinner to make sure that they allow FTP access to the web space that they provide to you and, if so, to get the credentials that you'll need to log in via FTP (host, username, password).

If SiteSpinner does not allow FTP access on your hosting account, then you'll need to find an alternative host for your Juicebox gallery and you can then follow the Embedding in a Web Template Site instructions.

There are many web hosts that offer free web space which would be suitable for hosting Juicebox galleries. (Juicebox galleries do not require any special web server requirements, with the exception of Password Protection and the Download Button which require PHP 5.2.0 or later. Please see the System Requirements support section for details.)
Try a web search with terms such as 'free web hosting' but please bear in mind that with a free hosting account, you may get little or no support, less reliability (more server down-time) and fewer features.
A few free web hosts that you might like to take a look at are 000webhost, hostinger and x10hosting.
Please note that we are not affiliated with any of these web hosts at all. They are merely suggestions (and not recommendations).

I hope these notes help to clarify things.
Please let me know if you have any further queries and I'll do my best to answer them for you.

No worries!
Whilst we're on the topic of the 'theme.css' file, you might like to take a look at the Theming Guide which has a few pointers towards customizing a gallery beyond what can be achieved with the available Config Options.

I'm glad that you've been able to resolve your problem.
Thank you for letting me know.

1,087

(4 replies, posted in Juicebox-Pro Support)

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.

1,088

(7 replies, posted in Juicebox-Pro Support)

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.

1,089

(15 replies, posted in Juicebox-Pro Support)

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.

1,091

(7 replies, posted in Juicebox-Pro Support)

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.

1,092

(3 replies, posted in Juicebox-Pro Support)

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.

1,094

(3 replies, posted in Juicebox-Pro Support)

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.

1,096

(7 replies, posted in Juicebox-Pro Support)

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.

1,098

(7 replies, posted in Juicebox-Pro Support)

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.

1,099

(15 replies, posted in Juicebox-Pro Support)

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.