• Registered: 2013-02-16
  • Posts: 4

Topic: Help with margins/padding between main image and thumbnails

Hello,

I'm currently building a photography website for a client and have brought Juicebox-Pro, however I'm having problems when changing the screen resolutions to test on different monitors. This is how a gallery appears on my screen resolution: 1920 x 1080 : http://www.alexcurtisphotography.co.uk/ … 0x1080.jpg

However when I test the same page on a monitor sized 1280x800, this is the outcome: http://www.alexcurtisphotography.co.uk/ … 80x800.jpg

A large margin/padding is noticeable above the main image to the title and a another big gap underneath the main image to the thumbnails.

Currently I have the Juicebox setting on 100%W and H. and Scale_Down mode on.  I'm trying to make it appear the same on every resolution but not sure how to get the Juicebox gallery to do this.

Is giving it a fixed height and width my only option? Could I set a max-width and height so it scales whilst keeping the same shape i.e. there is no big margin above and below the main image, appears just like the first picture.

Sorry for the long essay of description, would very much appreciate some help with this.

Kind Regards
Alex

  • Registered: 2012-05-02
  • Posts: 161

Re: Help with margins/padding between main image and thumbnails

I'm sure Steven or Felix can give a definitive answer. In the meantime, it looks to me that the difference is the aspect ratios of the two main images. At http://www.alexcurtisphotography.co.uk/ … 80x800.jpg , the image is as far left as it can go, so it can't get larger, which would also put it closer to the thumbnail row.

Have you tried your experiment using the same main image?

Cheers,

Bill

  • Registered: 2013-02-16
  • Posts: 4

Re: Help with margins/padding between main image and thumbnails

Hey Bill,

Many thanks for your response, It's not that I want the image bigger, just to keep the distant between the thumbnails and main image and above the main image at a constant. So say always 10pixels.

Every gallery image has the same effect :(. Think I will have to change the css to set a fixed padding/margin?

Thanks again for your help!

Is much appreciated.

Alex

  • Registered: 2013-02-16
  • Posts: 4

Re: Help with margins/padding between main image and thumbnails

Sorry Bill,

Also forgot to say all main images are 1200 x 600 in each gallery. That's why I put on Scale_down mode to fit the entire images on smaller resolutions.

Thanks again
Alex

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

Re: Help with margins/padding between main image and thumbnails

It looks like what you are experiencing is due to the aspect ratios of the user's browser window, the gallery (or more specifically the image area within the gallery) the main image itself and the imageScaleMode used.
For example, if you were to reduce the size of the browser window horizontally in the http://www.alexcurtisphotography.co.uk/ … 80x800.jpg gallery, then the height of the gallery would remain constant but the width would reduce. This would result in the main image being scaled down (respecting the original aspect ratio) within the image area and the gap between the gallery title and the main image itself would increase.
Other than setting fixed dimensions for your gallery, the only other way to ensure that there is a constant gap between the gallery title and the main image in all browser window sizes would be to fill the image area by setting imageScaleMode="FILL" (though cropping may occur on large images).

  • Registered: 2013-02-16
  • Posts: 4

Re: Help with margins/padding between main image and thumbnails

Hey Steven,

Thanks for the explanation I understand what you said and applied the imageScaleMode="FILL" and the margin problem got fixed like a treat thanks. Just cropping occurred but can fix this by making each image smaller instead of current size.

Thanks both of you :) post closed.

Kind Regards
Alex