2,401

(9 replies, posted in Juicebox-Pro Support)

I'm not exactly sure what is causing your problem but your embedding code is a little non-standard (loading the 'juicebox.js' file from a location other than a 'jbcore' folder, using JavaScript to set configuration options in an external file and running the setGallerySize() API method when the resize event is fired) and might somehow be contributing to your problem.

Here are a few things you could check or try.

(1) See if the problem happens in our own Pro Embedded demo gallery.
This might help to determine whether or not the problem is unique to your own web page.

(2) Try locking the viewport on your web page. Change:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

... to:

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

(3) You have set buttonBarPosition="NONE". This disables the entire Button Bar, including the Expand/Close Button which is the recommended method of closing an expanded gallery. Try setting buttonBarPosition="OVERLAY" and showExpandButton="TRUE" and try closing the expanded gallery with the Expand/Close Button (to return to your main page).

(4) Try embedding a more basic gallery into your main page as a test case using the recommended baseUrl embedding code here (rather than using your custom JavaScript code). If this works, then you can introduce elements of your custom JavaScript code to see if you can find the source of the problem.

I'm not sure if any of these suggestions will work but I hope they at least point you in the right direction.

2,402

(9 replies, posted in Juicebox-Pro Support)

For others reading this thread, the time before the overlay is hidden is determined by the inactivityTimeout configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section). Its default value is 4 (seconds) and the inactivity timeout can be disabled by setting its value to 0.

2,403

(1 replies, posted in Juicebox-Pro Support)

Make sure that you uninstall any existing version of JuiceboxBuilder-Pro first before installing a new version.
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.

If you run into any problems, then the Installation Issues section of the JuiceboxBuilder-Pro User Guide may help.

If this still does not help, then please try the procedure outlined in this forum post.

Also, I would recommend that you use the latest version of Juicebox-Pro (v1.4.4.2) rather than v1.3.1 as many bugs have been fixed since v1.3.1. Please see the Version History for a list of changes between versions.
You can download the latest version using the download link from your purchase email. Full instructions can be found on the Upgrading Juicebox support page.

If you continue to experience difficulties, please let me know exactly what the problem is (what error messages are displayed, if any) and I will try to help further.

2,404

(9 replies, posted in Juicebox-Pro Support)

Juicebox-Pro v1.4.4 introduced the captionBackTopColor configuration option. Please see the Version History for a list of changes between versions.
You can now set captionBackColor and captionBackTopColor independently of each other and the two colors will blend in the middle.
The default value for captionBackColor is rgba(0,0,0,0.3) and the default value for captionBackColor is rgba(0,0,0,0) (fully transparent). (Default values for all configuration options can be found on the Config Options page.)

If you want the entire caption area to have a consistent background, set captionBackTopColor to be the same as captionBackColor.
To replicate the default caption area color of versions prior to v1.4.4, set captionBackTopColor="rgba(0,0,0,0.3)" (black with an opacity value of 0.3) in JuiceboxBuilder-Pro's 'Customize -> Color' section.

If you are looking for examples of Juicebox galleries, then you might like to check out our own demo galleries here.

We have also highlighted several other users' galleries in our Facebook page, our Twitter feed and our blog.

Also, I would like to know the easiest sites to upload my gallery when done...

The easiest way to showcase a Juicebox gallery on the web would be to upload the complete gallery folder to a regular web server via FTP. You can then load the gallery's 'index.html' file in a browser to view the gallery.
Juicebox galleries can also be displayed in web template sites by following the instructions here.

2,406

(1 replies, posted in Juicebox-Pro Support)

The image navigation arrows are hidden by default in Touch Mode (where a swipe gesture is perhaps more usual than taping a navigation arrow).
If you want the navigation arrows to show in Touch Input Mode, set showImageNav="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
Alternatively, you could set showNavButtons="TRUE" ('Customize -> Button Bar') to show navigation buttons on the gallery's Button Bar.

2,407

(5 replies, posted in Juicebox-Lite Support)

Keyboard controls seem to work fine for me on the first image in your gallery as soon as the web page has loaded (in Chrome, Firefox and Internet Explorer on PC).
If the gallery is embedded in a web page alongside other content, then you would need to click on the gallery to give it focus before keyboard controls would work but this should not be necessary in a full page gallery (where the gallery's dimensions are 100% x 100% and it is the only content on the page).

Try completely clearing your browser's cache before reloading your web page to see if this helps.

To automatically give your gallery focus after the web page has loaded, you could try something like the following:

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(223,223,223,1)'
    });
    jb.onInitComplete = function() {
        $('#juicebox-container').find(':first-child').focus();
    };
</script>
<div id="juicebox-container"></div>

2,408

(3 replies, posted in Juicebox-Pro Support)

I'm not really seeing a problem with your web page.
When I narrow the browser window, the gallery's width reduces dynamically to fit the new viewport width but the gallery is always visible in its entirety. The vertical scroll bar never obscures the gallery, no matter how narrow it is. (I have viewed your web page in Chrome, Firefox and Internet Explorer on PC.)
Please let me know what browser(s) you see the problem in and, if possible, please upload a screenshot somewhere so that I can see what you are seeing.

There are a few things I have noticed on your web page which might help, though:

(1) You currently load the 'juicebox.js' file three times on your web page.
The 'juicebox.js' file should be loaded only once per page (regardless of how many galleries you have embedded on the page).
Try deleting two of the following lines of code on your page:

<script src="needleFeltAnimals4/jbcore/juicebox.js"></script>

(2) You currently set your gallery's width to be:

galleryWidth : '',

Using an empty string for the gallery width will probably default to 100% but, to be sure that the gallery is using a 100% width, use the following instead:

galleryWidth : '100%',

(3) The Doctype Declaration should be at the very top of your web page. Currently there is a blank line (whitespace) above it.
This is unlikely to be causing any problems and browsers will probably overlook it but, strictly speaking, it should be the first thing in the document.

(4) Try checking the code on your web page with the W3C Markup Validation Service and fix the errors reported.
https://validator.w3.org/
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.

I hope these notes help.

2,409

(3 replies, posted in Juicebox-Lite Support)

That's great! Thanks for letting me know.

2,410

(3 replies, posted in Juicebox-Pro Support)

This sounds like a page layout problem rather than something directly related to Juicebox.

A Juicebox gallery is essentially just a div container on a web page and the page layout should remain consistent regardless of whether there is a Juicebox gallery inside the 'juicebox-container' div or some other content.

Try replacing your gallery with an empty div (with the same dimensions as your gallery and a solid background color so that you can see what is going on) to see if the same thing happens with this container.
For example, change:

<div id="juicebox-container"></div>

... to something like:

<div id="test" style="width: 100%; height: 600px; background-color: #f00;"></div>

... making sure that the dimensions are the same as those of your gallery.

Also, you might like to check the HTML and CSS code on your web page with the following validators and then fix any errors reported.
HTML: https://validator.w3.org/
CSS: https://jigsaw.w3.org/css-validator/

Not knowing the layout of your page, I do not know if the following will help but if you have not already done so, try adding the following CSS code to the <head> section of your web page.

<style type="text/css">
    body, html {
        width: 100%;
    }
</style>

If you are trying to horizontally center your gallery in a parent container, then you could change:

<div id="juicebox-container"></div>

... to:

<div id="juicebox-container" style="margin: 0 auto;"></div>

In order to troubleshoot further, I'd really need to see the web page that you are referring to so please upload it to a web server and post the URL so that I can take a look at the problem for myself .
Also, please let me know what browser(s) you see the problem in. Thank you.

2,411

(3 replies, posted in Juicebox-Lite Support)

According to your gallery's 'config.xml' file, the first image in your gallery should be located here: http://eye.de/gal-html5/marilena/images … _1000h.jpg
... but going directly to that location in a browser results in an error 403 (forbidden).

Please check that your thumbnail and image files have been uploaded to the correct locations on your web server and that their permissions (and the permissions of the 'thumbs' and 'images' folders themselves) are not too restrictive.
Default permissions of 755 for folders and 644 for files should be fine.

You can check and change permissions with an FTP program such as Filezilla or via your web hosting account's online file manager.

Also, please see this FAQ which may help:
My images show locally, but not when I upload them to my website. Why?

2,412

(1 replies, posted in Juicebox-Pro Support)

As far as I am aware, the PNG file format does not support IPTC (but it does support XMP) and JuiceboxBuilder-Pro reads the IPTC block rather than the XMP block so, unfortunately, metadata embedded within PNG files is not extracted.

There is no way for a user to change the current behavior of JuiceboxBuilder-Pro but perhaps the best thing to do would be to suggest this idea (the ability to extract XMP metadata from PNG files) as a feature request for a future version in this forum thread.
I do not know the likelihood of your suggestion being included in a future version but posting it in the Feature Requests thread gives it the best chance of being seen and considered by the developers.

2,413

(5 replies, posted in Juicebox-Pro Support)

I have just tried embedding a gallery on Google Drive at less than 100% x 100% (at a fixed size of 600px x 400px) in a web page setting showSplashPage="ALWAYS" and trying both expandInNewPage="FALSE" and expandInNewPage="TRUE". The gallery expands correctly in both scenarios on my iOS device and in desktop browsers.
Here it is with expandInNewPage="AUTO":
https://7e149673cba79128b4d3fe7ac7a9b89 … index.html

I get an error 400 when trying to switch galleries on your web page (as well as when trying to expand a gallery from the Splash Page) so I think the problem might have something to do with the code on your web page and the way that your galleries are embedded or loaded.

As the problem happens when clicking one of your gallery links, you should have more control in debugging the switching of your galleries than the expanding of the Splash Page (although, being that the error messages are the same for both scenarios, they might be related to each other).

I would try debugging your web page's JavaScript code to ensure that all your variables are set as you expect them to be.
This should hopefully help to track down the cause of the problem.
After setting a variable but before using it, use a JavaScript alert box to check its value to see if it is what you expect it to be or if it is perhaps undefined for some reason (maybe due to a limitation in using Google Drive rather than a regular web server).
Check that everything is OK before running your new juicebox(content.options); line of code.

I would also try stripping back your custom JavaScript code so that only basic functionality exists.
You could then reintroduce elements, one at a time, to see if you can find the cause of the problem.

I realise that this does not directly solve your problem but I hope it at least points you in the right direction.

You might also like to look into the possibility of hosting your web site on a regular web server rather than on Google Drive.
Juicebox does not require any special server requirements so most web hosts (even those offering free web space) should be suitable.

Please see this FAQ which should hopefully help:
Why can't I view my gallery on a 3G mobile connection?

As well as adding the code to your own .htaccess file (which should allow everyone to see your own galleries no matter what connection type they use), you might want to contact your 4G provider to see if they can disable content modification on your account (which should allow you to view everyone's galleries regardless of whether or not they use the no-transform cache-control header in their own .htaccess file).

Thank you for providing the URL to your test page.

I have done some further investigation and it looks like the problem may somehow be related to the meta viewport tag on your main page.

I have loaded a default full page gallery into an iframe which takes up 80% of the page's width (just an arbitrary value that is not 100% so that any problems can easily be seen).
On changing orientation and then changing it back, there is no resizing and the gallery always fills the iframe and the iframe always fills 80% of the page's width.
Here is the test gallery.

As soon as I introduce a meta viewport tag into the page, such as the one you use in your web page (below), there are resizing problems (not exactly the same as yours but resizing problems nonetheless).

<meta name="viewport" content="width=device-width, initial-scale=1">

I don't know if anything can be done from within the iframe page (the gallery) but one possible workaround would be to refresh the page when the orientation changes. This will reset the page layout each time the device's orientation is changed.
This can be achieved by adding the following JavaScript code on your web page:

<script>
    window.onorientationchange = function() {
        window.location.reload();
    };
</script>

This might not be an ideal fix but it should work.
(The best solution would probably be to embed the gallery directly into your web page and not use an iframe but I realise that this is not possible with a web template site such as Squarespace.)

You might find the following two forum threads interesting.
http://stackoverflow.com/questions/1080 … ion-change
http://stackoverflow.com/questions/7919 … ion-change

As I cannot easily replicate your web page, could you please set up a page identical to your gallery's web page but loading different content (maybe http://www.juicebox.net) into the iframe so that I can compare the two scenarios? Thank you.

It certainly looks like the problem is either with the resizing of the iframe (the right part of the iframe being truncated on orientation change) or the browser not resizing the content correctly to fit the iframe (maybe due to not being able to correctly determine the iframe's dimensions).

I do not know if it will make a difference but you could try using the 'width' attribute directly in your iframe as well as (or instead of) using the CSS 'width' style.
Change:

<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style=" position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>

... to:

<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style="position: absolute; top:0; left: 0;" width="100%" height="100%"></iframe>

Also, try setting the following CSS code in the <head> section of your web page:

<style type="text/css">
body, html {
    width: 100%;
}
</style>

You could also try setting this CSS code in your gallery's web page.

I don't know if any of the above will help but they are certainly things that I would try myself.

Setting it to always use large screen mode fixed the problem.

That's great. Thank you for letting me know.

(I never saw the splash screen)

That's because the gallery is embedded in a web page at 100% x 100% with no other content on the page.
The gallery is not actually embedded into your main page. The gallery is embedded into the page which is loaded into your iframe. (This is the page which contains the gallery's embedding code.)
The Splash Page is displayed only when a gallery is embedded in a web page at less than 100% x 100% (or if showSplashPage="ALWAYS").

In my opinion the positioning of the caption should be customizable in small screen mode.

The best thing to do would be to post your suggestion in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

Unfortunately, other than changing the options which cause the problem, there is no way to prevent it from happening.
However, the issue is now in the hands of the developers and it should hopefully be fixed in the next version.

2,419

(9 replies, posted in Juicebox-Pro Support)

Please note that we did not write the Juicebox module for Drupal ourselves and if you have any queries relating directly to the module, I would recommend that you post in the Drupal forum where the author of the module (who will be more familiar with both Drupal and the module itself) should be able to help you out further: https://www.drupal.org/forum
The Juicebox module for Drupal is an unofficial plugin but is well supported by its author on the Drupal forum.

Also, the link you provided points towards an alpha (pre-beta) version of the module so there may well be bugs in it.
If you find any, I'm sure the author of the module would be very grateful to know about them so that they can be tracked down and fixed.

Having said that, your problem sounds likely to be related to either the location of the Juicebox files on your web server or the permissions of the files (or parent folders).
Please double-check that you have uploaded the contents of the 'jbcore' folder to the correct location on your web server, step #3 in the instructions here: https://www.drupal.org/node/2000300
Copy the contents of the 'jbcore' folder (not the 'jbcore' folder itself) into the '/sites/all/libraries/juicebox/' folder on your web server.

Also, make sure that the permissions of the files and folders in the path are not too restrictive.
Default permissions of 755 for folders and 644 for files should be fine.

I realise that this may not directly solve your problem but I hope this points you in the right direction.

2,420

(12 replies, posted in Juicebox-Lite Support)

Any news on this?

Yes. JuiceboxBuilder-Pro (since v1.3.0) features SEO support so that gallery content can be indexed by search engines.
Please see here for details.

Showkase also has the ability to add SEO content to Juicebox and SimpleViewer gallery pages.
You'll find the 'Add SEO content' checkbox in the gallery page settings.

2,421

(1 replies, posted in Juicebox-Pro Support)

All Juicebox gallery files should be on the same domain (or subdomain) as the web page which contains the gallery's JavaScript embedding code due to the same-origin policy.
Please see here for details: https://developer.mozilla.org/en-US/doc … gin_policy

In order to use files on a different domain, you could implement a Cross-Origin Resource Sharing (CORS) solution. More information about CORS can be found here: http://www.w3.org/TR/cors/

If you have an Apache server, add the following line of code to the .htaccess file in the root directory of the domain which hosts the gallery folder.

Header add Access-Control-Allow-Origin "*"

If you have an IIS server, then please see this link for a similar solution: http://enable-cors.org/server_iis7.html

Unfortunately, it looks like a browser-specific bug. I see your problem in Chrome but not in Firefox.
I have been able to replicate the problem in a test gallery of my own and I have logged a bug report with the developers.

The problem seems to be related to the following combination of configuration options so, until the bug is fixed, you might like to avoid this combination and try setting at least one of these options to a different value.

autoPlayOnLoad=TRUE
buttonBarPosition=OVERLAY_IMAGE
captionPosition=BELOW_IMAGE
imageTransitionType=CROSS_FADE

Thank you for reporting the problem.

The problem you are encountering is likely to be due to captionPosition being used only in Large Screen Mode (and not in Small Screen Mode). (This is noted in the description for the option in the Caption Options section of the Config Options page.)
In Small Screen Mode, captionPosition will always be set to its default value of OVERLAY_IMAGE.

There is much less screen real estate on a mobile device and for the caption text to be legible, it might take up too much space if it has an area of its own.

You could either:
(1) Set a captionBackColor and captionBackTopColor so that the caption can clearly be seen when it is overlaid on top of the image.
... or:
(2) Set screenMode="LARGE" so that the gallery is displayed in Large Screen Mode on all devices and in all browsers (so that all Large Screen Mode options are used).

Please note that priority is given to the main image rather than the caption text.
A long caption may be truncated if the maxCaptionHeight is not large enough. (A long caption will not push the main image up the screen resulting in the image being scaled smaller.)

To check whether or not the problem is directly related to the gallery, try loading a different web page into your iframe to see if the same thing happens (the iframe content is cropped on orientation change).

I notice that your iframe has a height of 100%. This means that it will fill its parent container vertically.
Please check that your iframe's parent container has a height set via CSS.
If it does not, then the browser may not be able to determine what the actual height (in pixels) of the iframe should be. (The browser needs to know what the iframe's height should be 100% of.)

Try setting a fixed height for your iframe (for example 600px), at least for testing purposes, to see if this helps.

Thank you for the suggestion.
I recommend that you post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.