726

(10 replies, posted in Juicebox-Pro Support)

If you are trying to add a custom caption to just one image using the Juicebox Plugin for Lightroom, then do the following:

(1) Click the 'Library' module tab.
(2) Select the image you want to add the caption to.
(3) In the 'Metadata' section, add the following to the 'Caption' box (changing the link and/or text as appropriate):

<a href="https://www.roatan.photos/credits.html">Click here to go to 'credits' page.</a>

(4) Click the 'Web' module tab.
(5) Select 'Juicebox-Pro' as the 'Layout Style'.
(6) Scroll down to the 'Image Info' section and make sure that the 'Caption' is set to {Caption»}. (This is the default value so you should not need to change anything.)
(7) Save your gallery to your hard drive via the 'Export...' button.

Step #3 embeds the caption as the IPTC Caption within the image.
Step #6 uses each image's IPTC Caption as the gallery's image caption. (Images without an IPTC caption will simply have a blank/empty caption.)

Alternatively, you could either:

(1) Open your gallery in JuiceboxBuilder-Pro (after creating it in Lightroom), click the appropriate thumbnail on the 'Images' tab and enter the caption (below) in the 'Caption' input box before re-saving the gallery on the 'Publish' tab.

<a href="https://www.roatan.photos/credits.html">Click here to go to 'credits' page.</a>

... or:

(2) Edit your gallery's 'config.xml' file in a plain text editor (again, after creating it in Lightroom) and replace the image's <caption> tag manually, e.g.:

<caption><![CDATA[<a href="https://www.roatan.photos/credits.html">Click here to go to 'credits' page.</a>]]></caption>

I hope my notes above help.

No worries!
I'm just glad to hear that your problems have been resolved.
Thank you for letting me know.

728

(10 replies, posted in Juicebox-Pro Support)

In order for captions to be visible, you'll need to set captionPosition to something other than NONE (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

If you do not want a separate area to be reserved for captions within your gallery (which would be empty for images with no caption text), then set captionPosition to either OVERLAY (where the caption area will overlay the bottom of the gallery's image area, spanning the width of the entire stage) or OVERLAY_IMAGE (where the caption area will overlay the bottom of the main image, spanning only the width of the main image itself).

Also, if you want the caption area to always be visible (rather than autohide after a set period of inactivity determined by the value of the inactivityTimeout configuration option), then set showImageOverlay to ALWAYS (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

Quote:

<caption><![CDATA[roanphotos-flowersphotos-begln1ima<a href="https://www.roatan.photos/child.html" target="_blank" imageClickMode="OPEN_URL>geClickMode="OPEN_URL]]></caption>

Your captions are malformed.
Each <a> tag needs to have a closing </a> tag (after the text which is to be used as the link).
For example:

<a href="http://www.example.com">Link text goes here</a>

Also, imageClickMode="OPEN_URL" is a Juicebox-Pro configuration option (which can be set in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) rather than an attribute for an HTML <a> tag.
(If you want to set imageClickMode="OPEN_URL" manually by editing your gallery's 'config.xml' file in a plain text editor, then you should add the configuration option as an attribute to the opening <juiceboxgallery> tag alongside the other configuration options).

Here's a sample caption that you could add to an image on JuiceboxBuilder-Pro's 'Images' tab which would display some sample text with only the word 'here' being a clickable link.

Click <a href="http://www.example.com">here</a> to go to another web page.

I hope this helps.

That's OK.
Leaving the post up might help others with similar problems.

I assume the only way to get the gallery to be a responsive size is to set the galleryWidth to 100%.

There are essentially two ways to make a Juicebox gallery responsive (with its dimensions dynamically changing with the size of the user's browser window).

Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.

Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.

I did this leaving galleryHeight empty and the result was not good.  I also tried 100% for the height...

If you leave galleryHeight empty, then Juicebox will use the default value of 100% (so leaving galleryHeight empty is the same as setting galleryHeight to 100%).

... and found that 85% was much better.  Am I doing this right or is there a better way?

If setting galleryHeight to 85% works within your own web page, then that is absolutely fine.

Also, If I have captionPosition set to below_image, it puts in a HUGE amount of wasted space between the image and the thumbs.

If you set captionPosition to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, then the height of the caption area will be fixed at the maxCaptionHeight value (default value 120px). (If you set captionPosition to OVERLAY or OVERLAY_IMAGE, then the height of the caption area will be variable up to the maximum value set via maxCaptionHeight.)
You can change the value for maxCaptionHeight in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

Is there a way to keep the captions from fading away?

Yes. Set showImageOverlay="ALWAYS" in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.

I hope my notes above help.

731

(10 replies, posted in Juicebox-Pro Support)

Question #1

... it worked great.

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

Question #2

Unfortunately, Juicebox has no way to split an image into individual hit areas and associate each one with a unique link.
The easiest way to include two different links into a specific image would be to use an image caption such as this:

<caption><![CDATA[Click <a href="http://www.example.com">here</a> for Link #1.<br>Click <a href="http://www.example.com">here</a> for Link #2.]]></caption>

If you are entering the caption directly into the JuiceboxBuilder-Pro interface, then you can use just something like the following

Click <a href="http://www.example.com">here</a> for Link #1.<br>Click <a href="http://www.example.com">here</a> for Link #2.

... JuiceboxBuilder-Pro automatically adds the <caption> and CDATA tags to the gallery's 'config.xml' file.

You can further style the caption/link text with inline CSS if you like, as noted in the FAQ I linked to in my last post (here).

If you don't want the caption area to be seen on other images in the gallery, set showImageNumber="FALSE" in the Caption section (to hide the image number in the caption area) and set the opacity for both captionBackColor and captionBackTopColor to zero in the Color section (to hide the caption area gradient).

I hope this helps.

732

(10 replies, posted in Juicebox-Pro Support)

Your gallery sets showThumbsOnLoad="FALSE" but also sets autoHideThumbs="TRUE" so, although the thumbnail area is not displayed when the gallery is initially displayed, itis displayed when you hover over the gallery (but you also 'hide' the thumbnail images by setting maxThumbColumns="0", maxThumbRows="TRUE", thumbHeight="0" and thumbWidth="0" so only the thumbnail navigation arrows are visible).

All you need to do to disable the thumbnail area completely (and thus hide the thumbnail images and navigation arrows) is set showThumbsOnLoad="FALSE" in conjunction with autoHideThumbs="FALSE" (its default value) so that the thumbnails do not reappear on hovering over the gallery.

There are a few ways to include links within a Juicebox-Pro gallery.

You can assign a unique link (known as a linkURL) to each image in a gallery. (You can add individual linkURLs on JuiceboxBuilder-Pro's 'Images' tab).

Normally, when the 'Open Image' button (in the gallery's Button Bar) is clicked, the image itself is opened.
However, if an image has been assigned a linkURL, then the linkURL will be opened instead (in a new browser tab or the same tab, defined by the corresponding linkTarget).

Also, if you set imageClickMode="OPEN_URL" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section), then the linkURL will be opened when the main image itself is clicked.

A linkURL can be a relative URL (relative to the web page containing the gallery) or an absolute URL (in the form http://www.example.com/index.html).

Alternatively, you can include a link in an image's title or caption by using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

Check out the link to our home page (via an image caption) in the first image in this demo gallery.

If you want to include a link in only one image in your gallery, then it might be best to do so via an image caption rather than by using linkURLs and setting imageClickMode="OPEN_URL" (as you might not want other images to have active links) but I hope that my notes above give you some ideas as to how you might like to proceed.

733

(1 replies, posted in Juicebox-Pro Support)

In LR Juicebox DW can I hide thumbs always...

You can prevent the thumbnails from being displayed when the gallery is loaded by setting:
showThumbsOnLoad="FALSE" - (for Large Screen Mode) - Thumbnail Options
showSmallThumbsOnLoad="FALSE" - (for Small Screen Mode) - Thumbnail Options

You can prevent the user from toggling the thumbnails on and off (by disabling the Thumbnail Button on the Button Bar) by setting:
showThumbsButton="FALSE" - (for Large Screen Mode) - Lite Options
showSmallThumbsButton="FALSE" - (for Small Screen Mode) - Thumbnail Options

... and have it default to full screen?

Juicebox was not designed to default to fullscreen mode and requires a click from the user (on the Expand Button on the Button Bar) to go into fullscreen mode.
If you really want your gallery to go fullscreen as soon as the gallery is loaded, then you could try one of the following suggestions but please remember that Juicebox was not designed with this in mind so you might encounter some unexpected problems.

(1) If you link directly to a web page containing a gallery, then try adding #expanded to the end of the URL.
As an example, take a look at this embedded demo gallery: https://www.juicebox.net/demos/pro/embedded/
... and now go to the same URL but with #expanded at the end of it: https://www.juicebox.net/demos/pro/embedded/#expanded

(2) If you cannot use a URL to automatically expand your gallery, then you could perhaps use the Juicebox-Pro API method toggleExpand() (within the onInitComplete event) inside your gallery's embedding code to fire fullscreen mode when the gallery is ready.
Here is some sample code which you could use to achieve this.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "600",
        galleryHeight: "400",
        showExpandButton: "TRUE"
    });
    jb.onInitComplete = function() {
        jb.toggleExpand();
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.

Edit:
Please note that if your gallery sets useFullscreenExpand="TRUE" (Lite Options) then neither of the suggestions above will trigger the Fullscreen API to go true fullscreen. (The gallery will expand only to fill the browser window, not the entire screen.)
This is due to a security feature of the Fullscreen API (please see here for further details) whereby the user must initiate the true fullscreen functionality via a click (on the Expand Gallery Button on the Button Bar).

734

(6 replies, posted in Juicebox-Pro Support)

@jasonsmith

I'm glad my suggestion helped you out.
Thank you for letting me know.

735

(3 replies, posted in Juicebox-Pro Support)

I'm glad to hear that you've been able to resolve your problem.
Thank you for letting me know (and for sharing the link).

736

(3 replies, posted in Juicebox-Pro Support)

It sounds like your problem might be server-specific.
Do you see any flickering when you view this test gallery (on our own server): https://www.juicebox.net/demos/pro/full/
I do not see any flickering when I view this test gallery and navigate between thumbnail pages or image pages on my own iOS 12.3 device.

Check your web server's cache control settings.
It sounds like your web server may be set to prevent browser caching which might account for the problem you describe.

Also check your gallery's embedding page for any meta tags which might prevent browser caching.

I hope this points you in the right direction.

By default, the Download Button will download the image being displayed in the gallery (using the imageURL from the gallery's 'config.xml' file, the same path that Juicebox uses to display the image in the gallery).

If you have a Multi-Size Image gallery, then the Download Button will download the 'large' size image (the largeImageURL) in preference to the imageURL.

If an image has a linkURL associated with in, then the Download Button will download the file pointed to by the linkURL in preference to all of the above.

Please take a look at your gallery's XML data to check the imageURL, largeImageURL and linkURL entries to see if you can figure out where the problem is originating from.

If you are using the Juicebox module for Drupal, then please note that this is an unofficial plugin which was not written by ourselves.
The gallery's XML data is dynamically generated by the module's code and so, if you are unable to determine the cause of the problem, then it might be worth posting your query in the Drupal forum where the author of the module might be able to help you further.

Also, it might help if I am able to see the problem for myself so if you continue to experience difficulties, please post back with the URL to your gallery's web page so that I can take a look and hopefully help further.
Thank you.

Edit:
As your Download Button seems to be downloading the 'juicebox.php' file (but with an .html file extension), it might be worthwhile checking that PHP is installed and configured correctly on your web server.
The Download Button requires PHP 5.2.0 or later, as noted here (check the 'Web Server' system requirements).

I'm glad it worked! Thank you for letting me know.

Is there a particular size I should crop an image to, for it to definitely fit?

The custom CSS is affecting the position of the image within the Splash Page container and the only way to counteract this is with CSS. The custom CSS will be applied to whatever image you choose to use for the Splash Page, no matter what shape or size it is.
Additionally, if your gallery is responsive, then the aspect ratio of the Splash Page will be dependent on the dimensions of the browser viewport being used to view the gallery so you have no way of knowing what shape and size the Splash Page will actually be for any given user (so there is no ideal size to use for the Splash Page image).

The quickest and easiest solution to the problem is to ensure that the max-width: 100% !important; CSS rule is not applied to the Splash Page image by removing the !important declaration from the rule. (This will likely not adversely affect other images on your web page at all.)

However, if you do not want to change the Jetpack CSS, then you'll need to change the Juicebox CSS instead.
Open the plugin's 'wp-juicebox/jbcore/classic/theme.css' file in a plain text editor.
Search for max-width: none; and replace all instances (there are four) to max-width: none !important.
In the current version of Juicebox-Pro (v1.5.1), they are on lines 119, 197, 247 and 696.

Otherwise, you could just add the following to the end of the 'theme.css' file:

.juicebox-gallery img, .jb-idx-thb-list .jb-idx-thumb img, .jb-dt-main-frame img, .jb-idx-thumbnail-container .jb-splash-holder img {
    max-width: none !important;
}

As the 'theme.css' file is loaded in your web page after the 'style.css' file, the !important declarations in the 'theme.css' file will override the !important declaration in the 'style.css' file

I hope this make sense and helps you to resolve your problem.

The "Front" of the gallery that you describe is the Splash Page which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content.
When the Splash Page is tapped, the gallery is expanded to fill the browser viewport (giving the images more room to be displayed).
Please see the Screen Modes section of the Gallery Tour for more information on the Splash Page.

By default, the Splash Page uses the first image in the gallery.
In your case, the image is offset (and not filling the Splash Page container as expected) because of some custom CSS on your gallery's embedding page.
On line 665 of your 'style.css' file ('/wordpress/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css') is the following code:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    height: auto;
    max-width: 100% !important; /* Fluid images for posts, comments, and widgets */
}

The max-width CSS rule is being applied to all images (all HTML <img> tags) within the specified CSS classes and this includes the Splash Page image. The Splash Page image has no option but to inherit this custom CSS rule.
Removing the !important declaration from the end of this custom CSS rule should be enough to reposition the Splash Page image correctly but, if other images on your web page require the !important declaration , then the best course of action would be to apply the max-width CSS rule to only those images on your web pages that require it through use of further CSS selectors (ids or classes).

Incidentally, you can choose to not use the Splash Page if you like by setting showSplashPage="NEVER".
If you continue to use the Splash Page (recommended for small screen devices), then you can configure the Splash Page (for example by choosing a specific image to be used) via the Splash Page configuration options.

I hope this helps.

741

(6 replies, posted in Juicebox-Pro Support)

Thanks for the quick response! Yes, that worked great.

You're welcome! I'm glad it worked. Thank you for letting me know.

Would you consider adding control over this directly in the interface?

Please post suggestions for future versions in the Feature Requests forum thread. (You can post suggestions for Juicebox and all official plugins written by ourselves there.)
This keeps all the requests together and ensures that they will not be overlooked by the developers.
I do not know the likelihood of any ideas being implemented in future versions but this is certainly the best place for all ideas.
Thank you!

742

(6 replies, posted in Juicebox-Pro Support)

There is no interface control to prevent the ALT tags from being used as image titles but you can disable them with a quick edit to the plugin's 'wp-juicebox.php' file.
Open the 'wp-juicebox/wp-juicebox.php' file in a plain text editor and comment out (or remove) lines 977 to 983 inclusive.
Just change:

$title_element = $dom_doc->createElement('title');
$image_title = $attachment->alttext;
$image_title = $this->line_break($image_title);
$image_title = $this->strip_control_characters($image_title);
$title_text = $dom_doc->createCDATASection($image_title);
$title_element->appendChild($title_text);
$image_element->appendChild($title_element);

... to:

// $title_element = $dom_doc->createElement('title');
// $image_title = $attachment->alttext;
// $image_title = $this->line_break($image_title);
// $image_title = $this->strip_control_characters($image_title);
// $title_text = $dom_doc->createCDATASection($image_title);
// $title_element->appendChild($title_text);
// $image_element->appendChild($title_element);

The leading // comments out a line and it will just be ignored rather than parsed and executed.

(The descriptions will still be used as the image captions.)

Please note that the line numbers above refer to the current version of WP-Juicebox (v1.5.1.1).

743

(1 replies, posted in Juicebox-Pro Support)

No. Unfortunately, there is no Juicebox plugin for darktable.
All known plugins for Juicebox are listed here.

744

(3 replies, posted in Juicebox-Pro Support)

The default value for showDownloadButton is actually FALSE (i.e. if you do not explicitly set showDownloadButton="TRUE", then the Download Button will not be displayed in the gallery's Button Bar).

The default value for showOpenButton is TRUE but you can disable the Open Image Button by setting showOpenButton="FALSE". (You can set showDownloadButton="FALSE" too, if you like, just to be sure that the Download Button will not be displayed.)

For reference, a list of all configuration options and their default values can be found on the Config Options page.

If you continue to experience difficulties, then please post a link to your gallery's web page so that I can see the gallery for myself. Please let me know what you see and what you expect to see and I'll do my best to help you out.
Please also confirm whether or not you are using the Juicebox Module for Drupal. Thank you.

745

(1 replies, posted in Juicebox-Pro Support)

The Juicebox plugin for Lightroom requires Lightroom 4, 5, 6, Classic CC 7 or higher.
This is noted on the plugin's own support page here.
(The plugin will not work with Lightroom CC.)

In late 2017, Adobe split what was then known simply as Lightroom CC into two separate products. Lightroom CC became Lightroom Classic CC (currently on version 8.2.1) and Adobe released a new version of Lightroom under the name Lightroom CC (currently on version 2.2.1).
Unfortunately, the new Lightroom CC does not accept third-party plugins or web engines so it is not possible to use the Juicebox plugin with this version.

There are other ways to create Juicebox galleries, though (you do not need to use Lightroom).
You can use JuiceboxBuilder (the standalone desktop program to create and edit galleries) or the Juicebox Photoshop Template (if you have Photoshop) or you can create a Juicebox gallery manually using the sample 'web' gallery as a template following the Manually Creating a Gallery instructions.

I hope this helps to clarify things.

746

(3 replies, posted in Juicebox-Pro Support)

If you are using the Juicebox Module for Drupal, then first of all, please make sure that you you are using the Juicebox-Pro 'jbcore' folder from the Juicebox-Pro zip package in Step #3 of the installation instructions here.

Afterwards, you should be able to enter Pro configuration options (such as expandInNewPage="TRUE") into the Juicebox Library - Pro / Manual Config section of your Drupal Dashboard (Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings).

Pro configuration options should be added as text, for example by typing or pasting expandInNewPage="TRUE" in the Juicebox Library - Pro / Manual Config section. (You will not find individual controls for each Pro configuration option within the module's interface.)

Please note that the Juicebox Module for Drupal is an unofficial plugin which was not written by ourselves.
As such, if you are experiencing difficulties with the module and the module's own documentation (found here) does not help, then I would recommend that you post your query in the Drupal forum where the author of the module (Ryan Jacobs) should be able to help you further.
He is active and very helpful in the Drupal forum and has a much better knowledge that I have of both the module and Drupal itself.

Incidentally, an alternative to using the module would be to create a gallery first on your computer using JuiceboxBuilder-Pro and then embed the gallery into your Drupal page using the baseUrl method of embedding following the Embedding in a Drupal Site instructions.

I hope these notes point you in the right direction.

747

(7 replies, posted in Juicebox-Pro Support)

Eg. "Large" = 2048x2048 and I can't choose 2048x1365 (2X3 ratio)?

When using JuiceboxBuidler-Pro to create a gallery and resize images, you can set whatever image dimensions you like (in the 'Set Image Sizes' control panel after clicking the 'Change Sizes...' button on the 'Images' tab).
Please note that these image dimensions are maximum image bounds (rather than the actual dimensions for the resized images).
Images are resized respecting their aspect ratios and the resized images will always be within the maximum image bounds.
However, if your source images are square, then the resized images will also be square.

It seems that the background always be square

The background will always be the same size as the gallery itself.
The gallery dimensions are set via the galleryWidth and galleryHeight configuration options (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) which are set in the embedding code.
galleryWidth and galleryHeight can be fixed pixel values or percentages.
If using a galleryWidth of 100%, for example, then the gallery's actual width will be 100% of the width of the gallery's parent container (so the gallery's actual width will be dependent on other containers and CSS on the embedding page).

I use Drupal and it is probably in the module the size is fixed (image style).

The Juicebox Module for Drupal is an unofficial plugin which was not written by ourselves.
As such, methods of resizing images and setting gallery dimensions will likely be different to how it is done in JuiceboxBuilder-Pro.
If the module's own documentation (found here) does not help, then I'd recommend that you post your query in the Drupal forum where the author of the module (Ryan Jacobs) should be able to help you further.
He is active and very helpful in the Drupal forum and has a much better knowledge that I have of both the module and Drupal itself.

I hope these notes point you in the right direction.

748

(7 replies, posted in Juicebox-Pro Support)

Thank you for the additional information.

From your screenshot, it looks like you may have set imageVAlign="TOP" which aligns the top of the main image with the top of the gallery leaving whatever space remains in the gallery below the main image.
If you want an equal amount of space at the top and bottom of the main image, then set imageVAlign="CENTER" (the default value for this configuration option) in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.

If this does not resolve your problem, then please check the CSS on your gallery's embedding web page to see if you have any custom CSS rules which are affecting the layout of your gallery (for example, any custom CSS rules which apply to all img tags on your web page which the gallery may be inheriting).

I hoe this helps.
However, 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 investigate further.
Thank you.

749

(7 replies, posted in Juicebox-Pro Support)

Unfortunately, I'm not exactly sure what you mean.
Maybe you could explain your problem in more detail (let me know what you see and what you expect to see) and, if possible, post screenshots to demonstrate the problem.

In the meantime, maybe my notes below will help.

When using Juicebox-Pro's Background Image Options (found here), you can select the backgroundScale (STRETCH, FILL or NONE) in JuiceboxBuilder-Pro's 'Customize -> Background Image' section but the background image itself does not change (and is not adjusted) which each image within the gallery is viewed.

You can set your gallery's backgroundColor to be transparent (set the Background Color Opacity to '0' in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and whatever CSS background you set in your gallery's embedding web page (whether for the gallery container or the entire web page) will shine through the gallery.
If you wanted to, you could then adjust (or change) the background depending on the image currently being displayed in the gallery (using JavaScript and CSS).

Here is an example which changes the gallery's background color to red for a portrait style image, green for a landscape style image and blue for a perfectly square image. You could modify the JavaScript to alter the background and way you like, for example to completely change or adjust the size of a CSS background image.
To see this example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <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" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                backgroundColor: "rgba(0, 0, 0, 0)",
                containerId: "juicebox-container"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var img = new Image();
                img.src = url;
                var imageHeight = img.height;
                var imageWidth = img.width;
                var imageRatio = imageHeight/imageWidth;
                if (imageRatio > 1) {
                    // Image is portrait style
                    $('#juicebox-container').css('background-color', '#ff0000');
                }
                if (imageRatio < 1) {
                    // Image is landscape style
                    $('#juicebox-container').css('background-color', '#00ff00');
                }
                if (imageRatio === 1) {
                    // Image is perfectly square
                    $('#juicebox-container').css('background-color', '#0000ff');
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this help to clarify things and point you in the right direction.
If not, then please explain your problem in greater detail and I'll try to help further.
Thank you.

750

(3 replies, posted in Juicebox-Pro Support)

I have done what you advice but it did not help.

I'm sorry to hear that my notes did not help.

I have solved it by changing the screenmode to large for this slideshow.

As you are aware of what is happening (visually and via your browser's developer tools), you can at least compensate for it (as you are doing).

It is not only the splashscreen that is to small but the whole small layout.

Thank you for the clarification. When you mentioned the jb-splash-background class, I though that the problem was specifically affecting the Splash Page (vs the gallery container). However, my own tests demonstrated that there was no difference between the gallery itself and the Splash Page (as you have just confirmed) but also that there was no discrepancy between the widths of the containers that you mentioned (unlike your own embedded gallery).

It is very difficult to pinpoint the exact cause of the problem in such a complex web page with so much going on.
If you can construct a minimal test case which exhibits the problem, please post back so that I can investigate further.
Thank you.