• Registered: 2013-08-30
  • Posts: 2

Topic: Gaps top and bottom in Gallery

I just installed the Juicebox Lite (JB) version on a web site that I am building in my production server, else I'd send you a link.  When I add the code to an existing template of my web site, the JB gallery appears and functions well...except for a large gap above and below the main image being displayed.

I have changed the color of the background to help determine if the gap is caused by my code or the code of JB. The gap seems to be caused somewhere within JB code. I am using the Bootstrap Grid for Responsive web design for the web page, and I don't know if that is what is causing the gap. But when I use the "Inspect Element" function of my browser, the affected area doesn't show any Bootstrap CSS references that would cause gaps.

When I shrink the height of the browser window itself, by using mouse handles to shorten the height of the browser, the gaps respond and shrink when the height is reduced, then grow as the browser height it increased. If I decrease the percentage of galleryHeight in the script from 100% to 75%, the gaps decrease. However, if I move the browser width to emulate that of a table or cellphone, the gap remains constant and doesn't adapt to the new screen size.

Does anyone have a suggestion on how to make the gallery height (padding, margin, or otherwise) remove the gaps above and below the main image? -- Thanks!

  • Registered: 2013-08-30
  • Posts: 2

Re: Gaps top and bottom in Gallery

I might add that the images that I am using are all a Maximum of 640 x 480, and I made that adjustment in the JuiceboxBuilder. But the gap remained if the settings were 640 x 480 or set to the default settings that were larger.

Everything works great! I just need to eliminate or reduce the 150+ px gaps above and below the larger displayed images when the browser is at full view.

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

Re: Gaps top and bottom in Gallery

As you are specifying your gallery's dimensions as percentages, the aspect ratio of the gallery will depend on the dimensions of the user's browser window.
For the imageScaleMode configuration option, Juicebox-Lite uses the default value of SCALE_DOWN, which (as long as the main images are larger than the image area within the gallery) will display the images as large as possible within the image area in the gallery whilst maintaining their aspect ratio and without cropping.
If the aspect ratio of your images does not match that of the image area in the gallery, gaps above and below (or to the left and right) of the images may be seen.
Solutions would be to either:
(1) Define your gallery's dimensions using fixed pixel values rather than percentages to ensure that the aspect ratio of the image area in the gallery matches that of your images (no matter what the dimensions of the user's browser window are).
... or:
(2) Purchase Juicebox-Pro and change the imageScaleMode to FILL , STRETCH or NONE so that the images fill the image area (though in order to do so, images may be cropped).
Descriptions of the imageScaleMode configuration option values can be found in the Main Image section of the Config Options page.