I have a responsive website with my galleries in the first (left) sidebar. The gallery images are responsive, but since I have set the "Gallery Height" to 650px the space between the main images and the thumbs (which are below the main images) becomes bigger and bigger as the browser width becomes smaller (I have three fixed layouts, narrow, normal and wide + mobile). I thought I could use "Gallery Height"=100% if I set a container div (which contains the gallery, created in my case by Drupal) which has it height set to a specific value for each of the four responsive layouts and also set "position: relative". But that didn't seem to work. I have also tried to set the css-settings for the classes "juicebox-container" and "jb-classifier-thumb-area", but to no avail.
I set the "Gallery Height" to 650px, because that works fine with my wide responsive layout and the image size.
How can I make the thumbs always to appear just below the main images, even if I use responsive design and the images get different heights (and widths) in the four different layouts? Some jQuery or maybe a simple setting that I have missed?
My current settings are like these:
themeUrl="/sites/all/libraries/juicebox/classic/theme.css"
showOverlayOnLoad="FALSE"
showAutoPlayButton="TRUE"
showAutoPlayStatus="FALSE"
enableAutoPlay="TRUE"
autoPlayOnLoad="TRUE"
autoPlayThumbs="FALSE"
enableLooping="TRUE"
imageTransitionType="CROSS_FADE"
displayTime="5"
imageTransitionTime="1"
imageHAlign="CENTER"
imageVAlign="TOP"
imagePadding="10"
buttonBarPosition="OVERLAY_IMAGE"
imageNavPosition="IMAGE"
captionPosition="OVERLAY_IMAGE"
thumbsPosition="BOTTOM"
thumbsHAlign="CENTER"
thumbsVAlign="TOP"
maxThumbColumns="3"
maxThumbRows="1"
thumbNavPosition="CENTER"
splashButtonText="Visa galleri"
splashShowImageCount="FALSE"
shareFacebook="FALSE"
shareTwitter="FALSE"