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,430

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

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

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

No worries! I'm glad that you've been able to solve your problem.
Thank you for posting back to let me know.

Check the permissions of your gallery's XML file (and all its parent folders) on your web server to see if maybe they are too restrictive (which might prevent new entries from being written to the file).
Default permissions of 755 for folders and 644 for files should be fine.

If the permissions are fine, then I think Ryan over in the Drupal forum might be the best source of help. As the author of the module, he will be much more familiar with its code and functionality than I am.

If I think of anything else which might help, I'll be sure to post back here.

I am not overly familiar with the Drupal module but it is my understanding that Pro Options should be entered into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').
I'm not sure if this helps.

Thank you for providing the URL to your gallery's web page.

Your gallery's XML file here:
http://devanimals.sandiegozoo.org/juice … cck_blocks
... contains no Pro Options at all.

Please check that you are adding the Pro Options to the correct gallery.

Otherwise, there is a chance that the Pro Options are not being saved or written to the XML file.
After saving the Pro Options, check that they are still listed in the Drupal interface and not missing.

2,441

(12 replies, posted in Juicebox-Pro Support)

That also works.

That's great to hear! Thank you for letting me know.

I'd buy you a beer if I were in the neighborhood Steven.

That's very kind of you!

I don't see a Juicebox gallery on your 'reindeer' web page.
It would be much easier for me to help troubleshoot your problem if I could see the problem for myself.
I realise that you may have changed the gallery (being that you have not been able to set up your Juicebox gallery exactly as you like) but, if possible, please recreate the problematic gallery (maybe just on a hidden page somewhere) so that I can take a look and hopefully help further. Thank you.

Incidentally, deselecting the Show Thumbs Button checkbox and setting the following in the Pro Options area should be enough to disable thumbnails.

showThumbsOnLoad="FALSE"
showSmallThumbsOnLoad="FALSE"
showSmallThumbsButton="FALSE"

Also, after making any changes, please be sure to clear your browser's cache before reloading your web page.

2,443

(1 replies, posted in Juicebox-Lite Support)

Both of the elements in your screenshot (the image number and the entire caption area) can be removed only in Juicebox-Pro but not in Juicebox-Lite (the free version).

The image number can be removed by setting showImageNumber="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

The entire caption area can be removed by setting captionPosition="NONE" (also in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

Alternatively, you could set the caption area's background to be completely transparent by setting captionBackColor="rgba(0,0,0,0)" and captionBackTopColor="rgba(0,0,0,0)" (both in JuiceboxBuilder-Pro's 'Customize -> Color' section). (Again, these configurations are supported by Juicebox-Pro but not Juicebox-Lite.)

You're welcome!

You're welcome!

2,446

(12 replies, posted in Juicebox-Pro Support)

I'm glad things are moving in the right direction.
The following should hopefully work for all elements on the overlay in a default gallery (button bar, caption area, gallery title).
However, I cannot test it in your own web page setup.

/* IMAGE OVERLAY */
.jb-classifier-show-on-over {
    z-index: 2 !important;
}

Also, I cannot be sure that elements such as the button bar and gallery title will not still overlap your hover images if they are positioned 'TOP' rather than on the overlay.
If you ever position elements 'TOP' or want to try changing the z-index for individual elements, then try:

/* CAPTION AREA */
.jb-area-caption {
    z-index: 2 !important;
}

/* GALLERY TITLE */
.jb-area-large-mode-title {
    z-index: 2 !important;
}

/* BUTTON BAR */
.jb-classifier-link-wrapper.jb-classifier-detail-area.jb-classifier-layer {
    z-index: 2 !important;
}

Try adding the following code to the bottom of your gallery's 'jbcore/classic/theme.css' file:

.jb-caption {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
}

You can change the individual CSS padding values to whatever you like. Please note that you will need CSS !important to prevent the custom values being overwritten by values set internally via the JavaScript 'juicebox.js' file.

2,448

(12 replies, posted in Juicebox-Pro Support)

I'm sorry to hear that didn't work.
Unfortunately, without in-depth knowledge of the hover plugin, I do not know what class or classes to apply the z-index to (and it's difficult to determine due to the element being present on the page only when hovering over a link).

Here's something else you can try.
Add the following code to the bottom of the 'wp-content/plugins/wp-juicebox/jbcore/classic/theme.css' file:

.jb-area-caption {
    z-index: 2 !important;
}

I do not know if this will work but it might be worth a try.

Otherwise, I realise that this is not an ideal solution but perhaps you could look into using a different plugin to display your images on hover, one that is still actively developed and supported. It might be worth looking into and could turn out to be an easier solution than you think.

Hopefully a future 'jbcore' upgrade will solve the problem but I'll post back here if and when I have any more news on this issue.

2,450

(1 replies, posted in Juicebox-Pro Support)

If the problem is not consistent, then this suggests that the issue may lie with either your web server or internet connection.
The code on your web page remains constant so, all being well, the page should be rendered consistently by browsers each time it is loaded. However, if there is a problem with the gallery files not being served to the browser in a timely manner, then the gallery could fail to display.

Also, please ensure that you are always accessing the gallery over wi-fi rather than a 3G or 4G connection.
If you are trying to view the gallery over 3G or 4G, the gallery may fail to display. Please see this FAQ for a solution to this problem:
Why can't I view my gallery on a 3G mobile connection?

Just for the record, I have just viewed your gallery on an iOS device and the gallery's Splash Page displays fine.

However, I notice that your web page contains a few HTML errors.
It would be wise to fix them as some browsers may be more tolerant towards errors than others.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater consistency and predictability across different browsers.