1 Topic by elperronegro (edited by elperronegro 2012-09-05 10:17:59)

  • Registered: 2012-09-05
  • Posts: 6

Topic: Getting rid of unwanted whitespace on responsive gallery

I have a problem.

If the height and width are set to 100% then I have a lot of unwanted whitespace in my gallery BUT the responsiveness works just fine. I have just the image and thumbnails. Specifically the unwanted space is above the image and between the image and the thumbnails.

To sort out the problem I set the gallery to 500 x 400 . This sorts out the problem on a wide screen desktop view but unfortunately then doesn't become responsive.

I guess the problem may lie in the theme.css file but I have no idea what to change to eliminate unwanted space.

What do you suggest I do?

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

Re: Getting rid of unwanted whitespace on responsive gallery

Changing the gallery's dimensions should not alter the responsiveness of the gallery.
If you can upload both galleries and post URLs to them so that I can compare them side by side, I will be happy to take a look.
Please let me know what you experience to be less responsive in the 500 x 400 gallery (e.g. thumbnail navigation, image navigation, clicking on Button Bar buttons).

The space you refer to is likely due to a number of factors:
(1) The dimensions of the gallery
(2) The value given to the imageScaleMode option
(3) The aspect ratio of the main image
(4) The aspect ratio of the user's browser window

If setting the gallery's dimensions to fixed pixel values rather than percentages, then #4 above does not come into play (as the gallery's size is fixed and the gallery will not be resized dynamically to fit the available browser window space).
If setting the gallery's dimensions to percentages, then if you resize your browser window, you will likely see the space reduce in size.
Changing the imageScaleMode will change how the main image fills the available image area space.
Possible values for the imageScaleMode option are SCALE_DOWN, SCALE, FILL, STRETCH and NONE.
Please see the Main Image Options section of the 'Juicebox Configuration Guide' for descriptions of these values.

You may also wish to make sure that the imagePadding option is set to zero to minimize the amount of space around your main images.

  • Registered: 2012-09-05
  • Posts: 6

Re: Getting rid of unwanted whitespace on responsive gallery

Thanks for the head up re some of the options. I do need the 100% width and height set.

You can see the test gallery at http://www.spanishhighs.co.uk/test/test-juicebox.php

This is what I really want as it is perfect regarding responsiveness except for the large blank areas. Under any resizing of the browser window there is a large gap both above and below the main image (Chrome).

Image padding = 0
imageScaleMode - I have tried all these .... SCALE_DOWN, SCALE, FILL, STRETCH and NONE. Scale_down works best

I am not using Caption nor Button Bar. They are set to none.

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Getting rid of unwanted whitespace on responsive gallery

If you want the images to fill the gallery area, either make your images larger or set imageScaleMode to "SCALE".

  • Registered: 2012-09-05
  • Posts: 6

Re: Getting rid of unwanted whitespace on responsive gallery

Main Image set imageScaleMode to "SCALE". No difference to elimination of white space above main image or between main image and thumbnails unless at full desktop browser width.

Try resizing http://www.spanishhighs.co.uk/test/test-juicebox.php from full to mobile size. The unwanted white space areas grow above and below the main image.

Conflict between the css of Twitter Bootstrap and Juicebox perhaps?

  • Registered: 2012-09-05
  • Posts: 6

Re: Getting rid of unwanted whitespace on responsive gallery

Ok no conflict with Twitter css etc. Now the test page is totally clean and just has Juicebox coding in it. Still loads of whitespace. Still the problem. Config.xml below ...

<juiceboxgallery

    resizeOnImport="false"
    useFlickr="false"
    cropToFit="false"
    imageScaleMode="SCALE"
    captionPosition="NONE"
    buttonBarPosition="NONE"
    backgroundColor="rgba(245,245,245,1)"
    showExpandButton="false"
    showThumbsButton="false"
    showOpenButton="false"
    showSplashPage="NEVER"

>


webpage code

<h2>Photo Gallery</h2>
<div id="juicebox-container"></div>

<!--START JUICEBOX EMBED-->
<script src="http://www.spanishhighs.co.uk/juicebox/test/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container',
      baseUrl : 'http://www.spanishhighs.co.uk/juicebox/test/',
  });
  </script>
<!--END JUICEBOX EMBED-->


Now been trying to solve this for 2 days. Surely this is easy stuff to resolve?

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

Re: Getting rid of unwanted whitespace on responsive gallery

Under any resizing of the browser window there is a large gap both above and below the main image (Chrome).

If you resize your Chrome browser window vertically to reduce the height, you should see the space between the main image and the thumbnails reduced.
If you reduce the height of your browser window enough, you should see the main image virtually touch the top of the thumbnails.

As Felix says, there are a couple of things you could do.
(1) Increase the dimensions of your main images. I notice that your first main image is 500 x 375. If you were to increase the dimensions of your main images, they would better fill the available image area when using imageScaleMode="SCALE_DOWN". (When using JuiceboxBuilder to create a gallery, the default dimensions used when resizing images are 1024 x 768 which is ususally a good compromise between image dimensions, file size and quality.)
(2) Set imageScaleMode="SCALE" so that your small main images are scaled up to better fill the available image area.
After making such a change, you may have to clear your browser's cache before reloading the gallery.

Incidentally, I notice that your web page has 10 opening <div> tags but only 8 closing </div> tags.
You can check your page for HTML errors (and then fix the errors reported) using the W3C Markup Validation Service. Once the code on your web page validates, the page will be rendered by browsers with greater predictability and consistency across different browsers.

Edit:

Still loads of whitespace.

Now that you have changed your test gallery, there is no gap between the top of the main image and the top of the gallery and there is only a minimal gap (the thumbPadding) between the bottom of the main image and the top of the thumbnails (due to the use of much larger images).

  • Registered: 2012-09-05
  • Posts: 6

Re: Getting rid of unwanted whitespace on responsive gallery

Ok finally did it. Yes, it does help to have larger images. I redid the test gallery loaded with images of 1024 x 768. Looked better but still looked odd on Ipad amongst others with plenty of unwanted spaces.

It needed a restricted gallery height setting in the coding ...... galleryHeight: "500",

ie
<!--START JUICEBOX EMBED-->
<script src="http://www.spanishhighs.co.uk/juicebox/mulhacen/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container',
      baseUrl : 'http://www.spanishhighs.co.uk/juicebox/mulhacen/',
            galleryHeight: "500",
  });
</script>
<!--END JUICEBOX EMBED-->

Now works fine on all platforms. Unwanted space all removed.