• Registered: 2014-03-07
  • Posts: 4

Topic: Responsive thumbs placement?

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"
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Responsive thumbs placement?

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).

This happens because as the size and shape of the user's browser window changes, the aspect ratio of your gallery (specifically the image area within the gallery) changes but the aspect ratio of your main image does not. When using the default value for imageScaleMode (SCALE_DOWN), Juicebox will scale the main image within the image area and if the aspect ratios of the image area and the image itself do not match, then there will be space to the left and right or top and bottom of the image.

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.

This will not work (as you have discovered). If you set your gallery's height to 100% but the gallery's parent container has a fixed height, then the gallery's height will also become fixed (e.g. 100% of 800px = 800px).

If you always want to fill the gallery's image area (so that there is minimal space between the bottom of the main image and the thumbnails), you can set imageScaleMode="FILL". However, your images may be cropped.

If you want your gallery's aspect ratio to always be constant (ie. for your gallery's width and height to both change when the user changes the browser's width), then please take a look at this forum post to see how this can be achieved with JavaScript. However, please bear in mind what whereas this is relatively easy to implement with a standalone gallery on a web page, it may be difficult to incorporate into a Drupal environment.