• dirk
  • Member
  • Offline
  • Registered: 2016-01-29
  • Posts: 14

Topic: Gallery height error

Hi,

would you please have a look at my website.

There are two galleries that work just fine.

On desktop computers everything is fine but on small resolution devices there is too much whitespace above and below the galleries.

This is an example of the config.xml:

    gallerywidth="100%"
    backgroundColor="rgba(238,238,238,1)"
    galleryFontFace="sans-serif"
    textColor="rgba(102,102,102,1)"
    captionBackColor="rgba(0,0,0,0)"
    imageShadowBlur="0"
    imageTransitionTime="0.5"
    galleryTitlePosition="TOP"
    buttonBarPosition="OVERLAY_IMAGE"
    textShadowColor="rgba(0,0,0,0)"
    showOpenButton="false"
    flickrShowDescription="true"
    imageShadowColor="rgba(0,0,0,0)"
    thumbShadowColor="rgba(0,0,0,0)"
    thumbDotColor="rgba(0,0,0,0)"
    maxThumbColumns="8"
    maxCaptionHeight="50"
    imageTransitionType="CROSS_FADE"
    showThumbsOnLoad="false"
    showSmallThumbsOnLoad="false"
    showSmallThumbsButton="false"
    showSmallPagingText="false"
    showThumbsButton="false"
    showExpandButton="false"
    captionPosition="NONE"
    showNavButtons="true"
    resizeOnImport="false"
    thumbPadding="0"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    displayTime="2"
    goNextOnAutoPlay="true"

This is the code I use in the html:

 <script src="galleries/moonscape/jbcore/juicebox.js"></script>
  <script>
new juicebox({
 baseURL : 'galleries/moonscape',
    containerId : "juicebox-container",

galleryWidth: "100%",
galleryHeight: /Android|BlackBerry|iPhone|iPod|Nexus|webOS/i.test(navigator.userAgent) ? '450' : '970',

backgroundColor: "rgba(255,255,255,100)"
});
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If I reduce galleryHeight in this line:

galleryHeight: /Android|BlackBerry|iPhone|iPod|Nexus|webOS/i.test(navigator.userAgent) ? '450' : '970',

to 820 e.g., gallery doesn´t use the whole space horizontally.

What can I do?

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Gallery height error

I notice that you are currently using Juicebox v1.5.0.
I would recommend upgrading to the latest version (v1.5.1) as many bugs were fixed in v1.5.1. (There are 40 documented bugfixes in the Version History.)

Having said that, I think your problem may simply be due to aspect ratio differences between your images and mobile viewing devices.

When I view your gallery on my iPod Touch, the gallery's Splash Page appears in the embedding page with very little space surrounding it (the Splash Page takes on the gallery dimensions set in the embedding code) and, when the Splash Page is tapped, the gallery expands to fill the viewport (regardless of the gallery dimensions set in the embedding code).
In the expanded gallery, your landscape-style images are displayed as large as possible (without cropping) in a portrait-style viewport but with white areas above and below the images.
If the images were displayed any larger, then cropping would occur and the left and right sides of the images would be missing.
When I rotate my iPod Touch, the images are displayed much larger (as the landscape orientation closely matches the aspect ration of your images) with only a little white space to the left and right of the images.

There's probably little you can do to reduce whitespace in your expanded gallery but Juicebox will always display the images as large as possible within the gallery's image area (no matter what size and shape the gallery is) unless imageScaleMode is changed from its default value of SCALE_DOWN.

I hope this helps to clarify things somewhat.

Please also see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

  • dirk
  • Member
  • Offline
  • Registered: 2016-01-29
  • Posts: 14

Re: Gallery height error

Steven @ Juicebox wrote:

I notice that you are currently using Juicebox v1.5.0.
I would recommend upgrading to the latest version (v1.5.1)

Thanks.

How can I upgrade? Do I have to install from the beginning? There is no "check for updates" in my JuiceBox Builder.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Gallery height error

Instructions for upgrading JuiceboxBuilder-Pro and existing galleries can be found on the Upgrading Juicebox support page.

Essentially, you can:

(1) Use your existing download link (from your original purchase email) to download the latest zip file ('juicebox_pro_1.5.1.zip'). Upgrades are free within the same major version number and download links always point towards the latest version rather than the version you purchased. If you cannot find your download link, then please fill in the Download Link Request Form and we'll send you a new one.

(2) Run the latest JuiceboxBuilder-Pro installer (the 'JuiceboxBuilder-Pro.air' file within the zip file) to upgrade JuiceboxBuilder-Pro. If you run into any problems during the installation, try uninstalling your existing version first before installing the latest version.

(3) Upgrade existing galleries by replacing their 'jbcore' folders with the latest 'jbcore' folder from the sample 'web' gallery (within the zip file). Alternatively, you can open a gallery with the latest version of JuiceboxBuilder-Pro (v1.5.1) and re-save the gallery on the 'Publish' tab.

Full instructions are in the link above.