Topic: Images of same size displayed differently

I have been doing some maintenance on all of my many galleries. One oddity I found is that though images have the same size (resized by JuiceBox), they are displayed differently. As per my layout, they should use the full width of the container they are placed. But some images use - I reckon - 80% of the total width. As examples:
how it should be http://vande.ch/photos/Azores/index.html#1.
how it should no be: http://vande.ch/photos/CruisePanamaCana … dex.html#1 ( I disabled the transparent background color so as to make it more visible.
Any help or advice how to solve this.
Thank you
Ed

Re: Images of same size displayed differently

The first images in each of your galleries have different sizes. The first image in your Azores gallery is 2048 x 1364 and the first image in your CruisePanamaCanal2011 gallery is 1024 x 684.
However, they do have very similar (though not identical) aspect ratios and are, therefore, displayed very similarly in your Juicebox-Pro galleries when I view them in my own browsers.
I don't see the problem that you seem to be describing. Perhaps you could provide a couple of screenshots to let me see what you are seeing.
In the meantime, maybe my notes below will be able to clarify a few things.

When displaying a gallery, Juicebox-Pro reserves space for the thumbnails and the TOP area (if used) and the main images are then dynamically scaled (according to the imageScaleMode value) in the remaining space.
The default value for imageScaleMode is SCALE_DOWN (you can check out all the possible values for this configuration option in the Main Image section here) where Juicebox-Pro will dynamically scale down the images (if necessary) to fit within the gallery's image area as large as possible whilst respecting each image's aspect ratio and without cropping. Images smaller than the gallery's image area will not be scaled up. If you are viewing your galleries on a very large monitor, then this might account for the difference you reported. The first Azores image, being 2048 x 1364 might be dynamically scaled down slightly but the first CruisePanamaCanal2011 image, being 1024 x 684, might be displayed at actual size (not scaled up). I cannot be sure of this as I don't know the browser viewport size you are using to view your galleries. If you want small images to be dynamically scaled up, then set imageScaleMode to SCALE. (However, this may reduce the visual quality of the image and a better solution would be to use larger gallery images.)

If you are concerned that the images are not filling as much of the width of your gallery as expected, then this is more than likely to be an aspect ratio issue.
If the aspect ratio of the image is not identical to the aspect ratio of the gallery's image area, then the image will be displayed as large as possible within the gallery's image area without cropping and this might mean that there is space to the left and right (or top and bottom) of the image.
If you want the image to completely fill the gallery's image area, then you can set imageScaleMode to FILL (cropping may occur) or STRETCH (stretching may occur).
However, if you increase your gallery's height (without changing its width), then you will increase the size of the gallery's image area (and change its aspect ratio) and the image will be able to be displayed larger, reducing the space surrounding the image.

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

Incidentally, I notice that you give your gallery a height of 100%. This means that your gallery will completely fill the height of it's parent container so please ensure that you have assigned your gallery's parent container a height via CSS, otherwise, Juicebox-Pro will not know what the gallery's height should be 100% of. (When using a percentage height, you might also need to implement the suggestion noted here.) You might like to try setting your gallery's height to a fixed pixel value (for example, '800px') instead.
Otherwise, if you want to have a web page with a fixed header (and/or footer) and have the gallery take up the remainder of the web page (without any vertical scrolling), then please take a look at the Using a Resizable Gallery with a Header support section (specifically the View Resizable Gallery with Top Menu Example). You can view the source of the sample web page in your browser and copy or modify the code to suit your own needs.