2,401

(5 replies, posted in Juicebox-Pro Support)

Please let me know what generation of iPad you have and what version of iOS you are using.
If possible, try upgrading to a more recent version of iOS.

Also, try a web search with terms such as "iframe iPad Mobile Safari". I do not know if any of the problems that crop up are directly related to your own problem but there are certainly other users who seem to be experiencing iframes which are not behaving as expected in Mobile Safari on iPads. One of the top search results might help or at least point you in the right direction.

Another thing that might help is rather than setting a percentage height for your iframe, you could perhaps use JavaScript to determine the actual required height of the iframe in pixels (depending on the size of the user's browser window) and then set the iframe's height to this pixel value dynamically using JavaScript and CSS.

2,402

(9 replies, posted in Juicebox-Pro Support)

Thank you for sharing your workaround. It certainly might help others facing the same problem.

2,403

(5 replies, posted in Juicebox-Pro Support)

That certainly sounds strange. The height of your iframe should be consistent on your web page (and determined either via CSS or by the iframe's 'height' attribute) no matter what content is loaded into the iframe.
Ordinarily, the content of the iframe should not change the layout of the parent page unless there is specific JavaScript code designed to do so and Juicebox does not contain any such code.

Your gallery looks to be a standard 100% x 100% gallery so it should fill the iframe and there is little you can do on the gallery side to change things.

From your screenshot, it looks like your gallery is filling the iframe (and everything seems to be correctly vertically centered on the page) but the iframe is not tall enough for the complete content of the page to fill your iPod browser window.
The problem seems to be with the height of the iframe on your main page.

I do not know how the height of your iframe is calculated (your web site is rather complicated).
Maybe it is looking at the content of the iframe and trying to determine the height required. Perhaps a gallery with 100% height is somehow difficult for your JavaScript code to figure out how tall the iframe should be.
Check the code that sets your iframe's height to see if you can spot any potential problems with it.

Also, please check to see if you see the same problem in Mobile Chrome that you see in Mobile Safari.
Thank you.

2,404

(9 replies, posted in Juicebox-Pro Support)

Thank you for the screenshots and sample URL.
I have now notified the developers of the issue and they will certainly investigate further.

2,405

(5 replies, posted in Juicebox-Pro Support)

If possible, please upload a screenshot so that I can see what you are seeing on your iPod.
The layout might be similar to what I see when I view your gallery in a desktop browser (the gallery being displayed to the right-hand side of the browser window).
The iframe your gallery is loaded into is nested within several parent containers and you may need to check the CSS of these divs.
(It looks like your web page may be designed for a specific device or browser width.)

To see if the problem is directly related to Juicebox or not, try loading a different page into your iframe.
Try loading something like http://www.google.com into your iframe rather than your gallery's 'index.html' page to see if the same layout problem happens on you iPod.

2,406

(5 replies, posted in Juicebox-Pro Support)

The error disappeared.

That's great to hear! Thank you for letting me know.
I'm not sure what the root of the problem was (hence my troubleshooting suggestions) but I'm always happy to see a problem disappear.

2,407

(5 replies, posted in Juicebox-Pro Support)

If I use the relevant URL directly, I get a complaint that there is no config.xml (and indeed, there is not).

That's to be expected (on Google Drive or any other host). The 'full.html' file is for Juicebox's own internal use only (when a gallery is expanded in a new page of its own) and may not display the gallery when accessed directly (depending on the gallery's structure).

However, trying to access the 'full.html' page directly might actually be quite a good test.
This essentially takes Juicebox out of the equation. All we are trying to do is access an HTML file directly.
The HTML page should still be rendered by the browser (displaying the 'Config XML file not found.' message).

In my own gallery, going directly to the 'full.html' page in Mobile Safari on an iOS device:
https://7e149673cba79128b4d3fe7ac7a9b89 … /full.html
... displays the page (with the 'Config XML file not found.' message) as expected.

However, going directly to the 'full.html' page in your gallery in Mobile Safari on an iOS device:
https://3fd620ce7dd6a53cea4c9215317f4dd … /full.html
... displays the error 400.

Here are a few things to try.
(1) Change the content of the 'full.html' file (temporarily) to something like the following which has nothing at all to do with Juicebox and try to access the file directly in Mobile Safari to see if the same problem happens.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
</head>
<body>
    <div id="test">Test text.</div>
</body>
</html>

If this still does not display correctly in Mobile Safari when accessed directly, then there may be an issue with the privacy settings on your 'full.html' file. Try making it private and then public again.

(2) Upload a completely new HTML file (with the sample code above) to the same directory as the 'full.html' file (your 'jbcore' folder) and see if you can access this directly in Mobile Safari. This should determine whether or not the problem is specifically with the 'full.html' file or with all HTML files in that directory.

(3) Try re-uploading your entire project to a new folder on Google Drive and ensure that all files and folders are made public.

The problem seems to be with access to the 'full.html' file on your Google Drive web space (both direct access and when Juicebox tries to access it dynamically) on iOS devices (but not in desktop browsers) so when I suggest that you try to access test pages directly (suggestions #1 and #2 above), you might want to use a service such as tiny.url to shorten the URLs and make life easier when entering the URLs into your Mobile Safari browser's address bar: http://tinyurl.com/

If we can figure out why the 'full.html' file cannot be accessed in Mobile Safari, then the other error 400 (which occurs when selecting a gallery from your menu) is likely to be related and hopefully the solution to one problem will fix the other.

Incidentally, I notice that your gallery's 'full.html' URL is much longer than mine. Maybe this has some relevance (especially when the 'juicebox.js' file is loaded and its code is run). Suggestions #1 and #2 above should tell us more.
If the problem does turn out to be due to the length of the URL, then there is little that can be done other than host your website somewhere other than Google Drive where you hvae more control over the path to your site.
If you have access to a regular web server, try hosting your web site there to see if everything works as expected. This should at least let us know whether or not the problem is somehow directly related to Google Drive (maybe with URL length or sharing settings).

2,408

(9 replies, posted in Juicebox-Pro Support)

Is there a way to add an event listener to detect when the user exits the gallery?

Ordinarily, you could use the onExpand(expanded) event from the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '800',
        galleryHeight: '600'
    });
    jb.onExpand = function(expanded) {
        if (expanded) {
            //Gallery has been expanded. Do something.
        }
        if (!expanded) {
            //Gallery has been closed. Do something else.
        }
    }
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Unfortunately, the onExpand(expanded) event is not fired when the gallery is closed having been expanded from a Splash Page. It works only when the gallery has been expanded from the actual gallery display itself.

To clarify (please let me know if this is correct):
Expand gallery -> Rotate device -> Close gallery => Splash page is "cropped and left justified" (until device is rotated again or page is zoomed)
Happens only on Android and Windows mobile devices and only when gallery is nested within parent container.

It certainly might help if I could see exactly what you are seeing so please upload some screenshots somewhere and let me know what devices and browsers you are using and see the problem in.

I may not be able to suggest a fix (it sounds like you have already tried everything that I think might help) but at least I can notify the developers with as much information about the problem as possible.
Thank you.

Try reinstalling the plugin from scratch to ensure that all the required files are present and correct.
If you need to, you can download a fresh copy of the Juicebox-Pro zip file using the link from your purchase email.
I recommend that you first delete the existing 'juicebox_pro.lrwebengine' folder from your 'Lightroom\Web Galleries\' directory before reinstalling the plugin.

Also, if you are using Lightroom 6/CC 2015 but have not upgraded it recently, then you might like to try upgrading it to the latest version (6.3/CC 2015.3) which Adobe released a couple of days ago.
This might help.

If you continue to experience difficulties, please let me know what (if anything) you see in the live preview window.
Do you see just a blank space or an error message (or something else)?
Does the problem seem to happen with only the Juicebox-Pro plugin or with other Web Layouts, too?

Try installing the Juicebox-Lite plugin (from the Juicebox-Lite download zip file) to see if the same thing happens with this version.
You can install both the Juicebox-Lite and Juicebox-Pro plugins side-by-side at the same time.
Juicebox-Lite can be downloaded from the download page here.

2,410

(9 replies, posted in Juicebox-Pro Support)

Here are two more suggestions that might help.

(1) Rather than using the default setting of expandInNewPage="AUTO", try setting expandInNewPage="TRUE" (to always expand the gallery from the Splash Page in a new page of its own) or expandInNewPage="FALSE" (to always expand the gallery on top of the embedding page). You might find that one of these settings works. (You can find the expandInNewPage configuration option in JuiceboxBuilder-Pro's 'Cuistomize -> General' section.)

(2) Also, when nesting the gallery within parent containers and giving your gallery percentage dimensions, it may be necessary to ensure that all parent containers have dimensions specified via CSS.
For example, if your gallery has a height of 100%, then Juicebox needs to know what its actual height should be 100% of. If the gallery's parent container does not have a height specified via CSS, then Juicebox may not be able to determine the gallery's actual height.
Please see this note regarding Using Percentage Heights.

Hopefully one of these two suggestions will help.

2,411

(9 replies, posted in Juicebox-Pro Support)

... the preview shown in the Adobe Air engine is quite different than the browser view.

This is a known issue which is noted in the JuiceboxBuilder User Guide.
Adobe AIR's built-in browser does not support all CSS 3 properties which results in gradients and shadows not being rendered correctly. (This happens only in the JuiceboxBuilder live preview and not in modern browsers.)
Adobe recently upgraded their browser in Lightroom 6 (which now renders gradients and shadows correctly) so I am hopeful that they will soon do likewise with their browser in Adobe AIR.

2,412

(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,413

(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,414

(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,415

(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,417

(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,418

(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,419

(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,420

(3 replies, posted in Juicebox-Lite Support)

That's great! Thanks for letting me know.

2,421

(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,422

(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,423

(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,424

(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).