• Registered: 2017-04-20
  • Posts: 6

Topic: Responsive Thumbs Resizing?

Hey Guys,
On the Juicebox Site demo Galleries, the one that is labeled ‘Top Left Alignment’ has thumbs on the right that are resizing as my browser window changes to smaller sizes, along with the the main image also getting smaller.
I have tried this tonight, but on my attempt, the image gets smaller, but the thumbs stay the same size, until the image disappears.
Note: My gallery is embedded in a page design, and my thumbs are on the left of the image, instead of the right, if that matters.
Thanks.

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

Re: Responsive Thumbs Resizing?

Juicebox does not actually support responsive thumbnail dimensions. There is no configuration available which allows thumbnails to change size depending on the available space. The number of thumbnails displayed on-screen at any one time is responsive, though (see Note #2 below).

In all Juicebox galleries, thumbnails are always displayed at the designated thumbWidth and thumbHeight dimensions.
Space is reserved for the thumbnails in the gallery and the remaining space is used for the main image.

In the Top-Left Alignment demo, the gallery has fixed dimensions (1000px x 1000px) and is therefore not responsive at all. The gallery is always displayed at 1000px x 1000px, regardless of the browser window size. If the browser window is made smaller, the gallery is simply cropped.
The only way I can make anything in the Top-Left Alignment demo smaller is to change the browser's zoom setting (which affects all content on the page, i.e. the main image and thumbnails). Just changing the browser window size has no effect on the dimensions of the main image or thumbnails.

Bearing in mind that there is no way to make thumbnail dimensions responsive within a Juicebox gallery, here are some notes on gallery responsiveness and thumbnails which might help.

Note #1: Gallery Responsiveness

There are essentially two ways to make a Juicebox gallery responsive (with its dimensions dynamically changing with the size of the user's browser window).

Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.

Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.

Note #2: Number Of Thumbnails Displayed

When thumbsPosition is set to either LEFT or RIGHT, the number of thumbnail columns is fixed at the maxThumbColumns value whereas the number of thumbnail rows is variable (up to the maxThumbRows value) depending on the dimensions of the thumbnails and the space available in the user's browser.
Take a look at this demo gallery with 3 columns of thumbnails.

When thumbsPosition is set to either TOP or BOTTOM, the number of thumbnail rows is fixed at the maxThumbRows value whereas the number of thumbnail columns is variable (up to the maxThumbColumns value) depending on the dimensions of the thumbnails and the space available in the user's browser.
Take a look at this demo gallery with 3 rows of thumbnails.

3 Reply by sol765 (edited by sol765 2020-07-28 14:13:55)

  • Registered: 2017-04-20
  • Posts: 6

Re: Responsive Thumbs Resizing?

Hi Steven,
Thank you for the in-depth reply. Much, much appreciated!

Let me just start by saying, I’m a coding newbie. So most of what I say here does have that as an overall limitation factor. :-)
But, that being said, I am working on my first complete website, fully coded from scratch, except for  the use of my Juicebox photo galleries.
In all this, I’m dealing with, and learning ‘Media Queries’.
With my previous coding, both on my desktop, or with iPad Pro (using multiple windows), I can resize the browser window and the media queries kick-in and do there set modifications.
In trying out the sample demo on your site, ‘Top Left Alignment’, the gallery does resize visually to smaller main image, and clearly smaller thumb sizes, automatically. I assumed it was a media query thing, in the Juicebox gallery itself. Because that is what happens when I test my coded site pages on my iPad. They change their positioning, and such, as dictated there in the set media queries.
But it sounds like your telling me that it’s simply the iPad’s Safari browser that is reducing the resizing of the gallery elements, as a whole entity, within the page. Correct?
I do know that the iOS Safari scales stuff really well. I guess that’s what I was seeing?

Scenario #1: I’ll look at that as an option. Play around with it a bit and see what that gets me. Size percentages.

Scenario #2: Back to that previously mentioned ‘newbie’ thing. Haven’t learned java script or  jquery yet. Still just on html and css. But hey, working on it. :-)
Note#2: Yes, that one I have been working with. Thinking that’s going to likely be my path to get what I need.

Final questions (I hope):
In the demo galleries, you show an ‘iPhone Simulation’ mode where it switches to a completely different look, switching between ‘full image view’ and then ‘only thumbnails’ view.
How does that transition kick-in? Is it a ‘media query’ created in the Juicebox CSS ‘styles’ output?
I see on the demo you list "setting the screen mode option to ‘Small’". Is that setting ‘Small’ or ‘Auto’ automatically locked into the Juicebox code when the gallery is created? Or is that something I need to set in my CSS media queries for different screen size variations? And if so, is there a transition size point that you recommend?
FYI, I am using all of my galleries embedded.

Thanks!
- Sol

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

Re: Responsive Thumbs Resizing?

In trying out the sample demo on your site, ‘Top Left Alignment’, the gallery does resize visually to smaller main image, and clearly smaller thumb sizes, automatically.

It shouldn't (and it doesn't for me)! I've just double-checked the Top-Left Alignment demo in Chrome, Edge and Firefox. Resizing the browser window has no effect on the actual dimensions of the gallery, the main image or the thumbnails (due to the gallery having a fixed size of 1000px x 1000px). Making the browser window smaller than the gallery simply crops the gallery (and you'll not be able to see the whole gallery at once without scrolling the web page).
As I mentioned previously, the only way I can make anything in the gallery look smaller is by changing the browser's zoom scale.
I'm not sure if this is what you are doing but it's the only thing I can do to replicate what you are describing.

... and clearly smaller thumb sizes, automatically

Just to clarify, that's not something that Juicebox does under any circumstance. Thumbnail dimensions remain constant, regardless of whether or not the gallery itself is responsive. The only way to make thumbnails look smaller is by changing the browser's zoom scale.
Check out this full-page responsive demo gallery . When you change the browser window size, the dimensions of the main image will change (depending on the space available) but the dimensions of the thumbnails will not change. (The number of thumbnails being displayed will change though, depending on the space available.)

Juicebox does not use media queries to switch between Small Screen Mode and Large Screen Mode.
There are more differences between Small Screen Mode and Large Screen Mode than can be handled by CSS alone. (In Small Screen Mode, thumbnails and the main images are displayed on different pages and different configuration options are used when displaying the gallery.)
Juicebox uses JavaScript to check the device/browser being used to view the gallery and the size of the viewport.
If screenMode="AUTO" (the default value) and the gallery is being viewed on a mobile device with a screen whose largest dimension is 1000px or less, then Small Screen Mode will be used (otherwise, Large Screen Mode will be used).

I see on the demo you list "setting the screen mode option to ‘Small’". Is that setting ‘Small’ or ‘Auto’ automatically locked into the Juicebox code when the gallery is created?

By default, screenMode is set to AUTO and Juicebox will make the decision as to which screen mode to use automatically.
Take a look as this demo gallery (which uses all default settings) in a desktop browser and on a mobile device and you'll see the different screen modes being used.
However, if you like, you can force Small Screen Mode or Large Screen Mode to always be used on all devices and in all browsers by setting screenMode to either SMALL or LARGE in JuiceboxBuilder-Pro's 'Customize -> General' section.

I hope my notes above help to clarify things.
Please let me know if you have any other queries and I'll do my best to answer them for you.