Topic: White gap between thumbails and main image

I have created a gallery with images 1024x768.  All appears to be fine on my pc and ipad when viewing (main image with thumbs underneath - only a small gap between thumbs and main image).

If viewing on a machine with a larger resolution, then a big white gap appears between the main image and the thumbs.  The thumbs seem to align with the bottom of the frame and the image with the top.  I have got THUMBS VALIGN set to TOP and MAIN IMAGE VALIGN is also set to TOP.  I cannot seem to work out how to fix this?  Any ideas? 

I have attached my config.xml

Post's attachments

config.xml 6.64 kb, 2 downloads since 2017-02-28 

You don't have the permssions to download the attachments of this post.

Re: White gap between thumbails and main image

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

Two other things I'd recommend:

(1) Set imageVAlign to CENTER (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) and the white gap will be equally split between the top and bottom of the image (instead of all at the bottom) and it should be less obvious.

(2) Use larger images in your gallery so that they need to be dynamically scaled down (by Juicebox when the gallery is displayed) and are displayed as large as possible within the gallery's image area (minimizing the white gap). With the default value of SCALE_DOWN for imageScaleMode (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section), small images are not scaled up and space might be seen above or below the images. (You could always change imageScaleMode to SCALE to scale up small images if you like but using larger gallery images would be a better solution.)
1024 x 768 is usually a good 'average' image resolution for most galleries but if you know your target audience is likely to be viewing your gallery on large monitors, then larger images might be more suitable for you. (Larger images will still look fine on smaller monitors as Juicebox will scale them appropriately. The only drawback is that larger images will consume more bandwidth when they are downloaded by the user's browser.)
It looks like you're already using a Multi-Size Image gallery. You might just need to bump up the resolution for the 'medium' size images a bit.

Re: White gap between thumbails and main image

Thanks for the reply, but still having problems.  I set Gallery Height to 830 pixels.  When viewing on large resolutions the thumbs are at the bottom of the screen and the image at the top with a massive gap between.  I have imageSCALEmode set to NONE as I do not want the image to be scaled.  I have also cleared out the browser cache and still have the same problem.  Any ideas?

Re: White gap between thumbails and main image

Also, I have now reverted gallery height back to 100% and now when I view the gallery it puts a vertical scroll bar on the window? I have simplified content so you can have a look.  There is just the one image at 1024x768.    www.martinturnerartist.com/port.html

Re: White gap between thumbails and main image

Okay, the problem seems to be that if I set a fixed gallery width/height, the scale options no longer work (hence the forced scroll bar). If working with a percentage then they do.  My current gallery is set at 100% on both vertical and horizontal, the gallery works great on all devices with exception to those using large resolutions in which you get a big white gap between the image and the thumbnails.  There must be a way to solve this without resorting to using massive images?  If I use image Valign to center it looks just as odd.  I am an artist hence reluctance to use large images.

6 (edited by martinturner99 2017-03-01 14:07:44)

Re: White gap between thumbails and main image

If you want to see exactly the problem I am having go to

Www.quirktools.com/screenfly and enter www.martinturnerartist.com/index2.html into the URL box and click Go.  If you click through the resolutions down from the left button you can see the big gap between thumb and image at the large sizes.  If I set a fixed gallery height of say 768 it then stops me being able to scale the gallery.  Ideally I want it to show image at 1024x768 if browser allows, if not scale down but at larger sizes keep image it at 1024x768 with thumbs directly underneath.

7 (edited by martinturner99 2017-03-01 19:08:28)

Re: White gap between thumbails and main image

So, I have decided to go with a larger size image 1920x1200 - I will just watermark them (and lower quality a bit).  This seems to be working better - in terms of white space between thumbs and images and how it manages real estate.  The only niggle I have is that the Juicebox frame is taking over and ignoring the fixed left hand frame in most resolutions? If you open  http://www.martinturnerartist.com/index2.html you should see what I mean.  Help very much apppreciated.

Re: White gap between thumbails and main image

This is now resolved.  I had mistakenly set a frame width for the second frame (containing the juice box gallery).  Whilst the right size it caused problems.  I removed it and set it to * and voila, problem solved.  Gallery looks (or will do) great!  Thanks

Re: White gap between thumbails and main image

This is now resolved.

Thank you for the updates.
I'm glad that you've been able to resolve your problem.
Thank you for letting me know.

Here are a few notes which might help to clarify a couple of things.

Okay, the problem seems to be that if I set a fixed gallery width/height, the scale options no longer work (hence the forced scroll bar). If working with a percentage then they do.

If you set a gallery's height to be a fixed pixel value, then the gallery height will always be the specified value and a vertical scrollbar will appear if necessary.
If you set a gallery's height to be a percentage value, then the gallery's actual height will be the specified percentage of the gallery's parent container. If there is no other content on the web page, then the gallery's parent container will be the 'body' tag and setting a gallery's height to be 100% will mean that the gallery's height will always fill (be 100% of) the browser window height.

I am an artist hence reluctance to use large images.

Using larger images or changing imageScaleMode to either 'SCALE' or 'FILL' are the only ways to have your gallery images fill a larger area and minimize the space surrounding them.

Ideally I want it to show image at 1024x768 if browser allows, if not scale down but at larger sizes keep image it at 1024x768 with thumbs directly underneath.

If the browser window is much larger than 1024 x 768 and you want your images to be displayed at no more than 1024 x 768, then there will be empty space somewhere. Setting imageVAlign to 'CENTER' (the default value) to split the empty space equally above and below the image is usually a good visual solution. Unless you set your gallery's width and height to be fixed pixel values (i.e. if you use percentages), you essentially have no control over the aspect ratio or size of your gallery and trying to have a gallery look good in a myriad of different viewport shapes and sizes is never going to be easy. If you know that your target audience is likely to be viewing your gallery on large desktop monitors (or, conversely, on mobile devices), then you can tweak your gallery to perhaps look better in one viewport shape than another but, often, compromises may have to be made so that galleries look 'good' everywhere rather than 'great' in certain aspect ratios but 'poor' in others.

So, I have decided to go with a larger size image 1920x1200 - I will just watermark them (and lower quality a bit).

That sounds like a good solution to me!

Re: White gap between thumbails and main image

Thanks again for your help.

Re: White gap between thumbails and main image

You're welcome.