• Registered: 2016-01-07
  • Posts: 1

Topic: Large Top/Bottom Margins on large monitors (1920x1080)

Hi

I downloaded your Lite version today and would like to purchase the Pro version for the advance features i.e. Multi-Size Image Support.

I'm in the process of designing a new responsive website for our photography business and want to use your program to create the slideshows for the respective pages using the Lightroom plug-in.

Is there is a way to control the margins above and below the photo when viewed on 1920x1080 or larger monitors?

To demonstrate my question I have uploaded a page with screen captures of various screens sizes, you will notice that the margins viewed on a 1920x1080 screen are "unattractively" large:

http://photographers.webpreviews.co.za/ … cebox.html

I'm happy with how it displays on smaller screens and mobile devices.

I am using CoffeeCup's RSD software to design the website and then imbed the JuiceBox code into the respective pages.

Here are links to the imbedded page and the page created by your Lightroom plug-in (the page created by the plugin also have large margins):

http://photographers.webpreviews.co.za/nature/
http://photographers.webpreviews.co.za/ … lugin.html

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

Re: Large Top/Bottom Margins on large monitors (1920x1080)

Thank you for the screenshots demonstrating your problem.
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

The problem is one of aspect ratios.
With a responsive gallery, you essentially have no control over the aspect ratio of your gallery. It will depend on the dimensions of the user's browser window. However, the aspect ratio of your images remains constant (as long as they are not cropped).
In your large monitor screenshot, your gallery fills the viewport and your images are scaled as large as possible without cropping. If they were scaled any larger, then cropping would occur. (If you reduce the browser window height, you will see the space above and below the images decrease.)

Possible solutions would be to:
(1) Fix your gallery's dimensions so that the aspect ratio of the gallery's image area always matches that of the images themselves.
(2) Set imageScaleMode="FILL" so that the images fill the image area (although the images may be cropped).
(3) Reduce the height of your gallery so that the space above and below the images is minimized.

Otherwise, you might need to accept that your gallery may not look exactly as you would like it to be in every browser window shape. Juicebox does its best to adapt to all screen sizes but it's difficult to make a gallery displaying images of a certain aspect ratio fill browser windows of different shapes.

Also, make sure that your images are at least 1920 x 1080 in size so that they need to be dynamically scaled down slightly by Juicebox when the gallery is displayed. This will ensure that your images are always displayed as large as possible within the image area.
Using the default setting of imageScaleMode="SCALE_DOWN", small images are not scaled up so if your images are not large enough to fill the image area, then they will not be scaled up and there may be more space surrounding them than is necessary.
You could set imageScaleMode="SCALE" to scale small images up to fill the image area but this would decrease their visual quality. It would be better to feed Juicebox larger images.

I hope these notes help.