• Registered: 2013-09-07
  • Posts: 17

Topic: Gallery size miscalculated on retina displays

Hello !

I am having a problem displaying my juicebox galleries on my android retina tablet (galaxy tab pro ~1900x1200, chrome) : as you can see in the link below, some elements are displayed outside of the gallery :
http://yannicklerestif.com/_dist/temp_j … enshot.jpg
On another browser the gallery looks ok width wise but the caption still is halfway outside the gallery.

Also, some elements seem to have been resized (which is ok !), presumably so that they're not too tiny because of the retina display.
So my guess is that because of this resizing gallery sizes are not properly calculated / taken into account.

Are you aware of this problem ? Or maybe is there something I did wrong ? I can set up a gallery for you if you want to reproduce the problem.

If this is actually a problem, how can I get around it ?

Thanks in advance !


Yannick

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

Re: Gallery size miscalculated on retina displays

Try removing all CSS applied to the 'juicebox-container' div and apply it to the gallery's parent container instead.
You currently have inline CSS applied directly to the 'juicebox-container' div and JavaScript applying CSS rules (max-width, margin-left and margin-right) to the 'juicebox-container' div on retina screens.
Leave your gallery's width at 100%, leave the gallery's container as <div id="juicebox-container"></div> and apply any CSS (either directly or via JavaScript) to the gallery's parent container (your div with id="wrapper") rather than to the 'juicebox-container' div itself.
Hopefully this will help.

  • Registered: 2013-09-07
  • Posts: 17

Re: Gallery size miscalculated on retina displays

Hello ! I removed the css and the wrapper.

Width looks ok like this but the bottom half of the caption is still out of screen.
For now I worked around the problem by removing a row of thumbs...

Also I noticed another little problem with the caption : caption does not display when the gallery is first displayed (only comes back when another image is displayed) if showSmallThumbsOnLoad is set to false.

One last little thing : gallery appears wrong when coming out of expanded mode on retina displays : thumbs seem to have be enlarged a second time. You can see the image here : http://yannicklerestif.com/_dist/temp_j … nshot2.jpg

None of this is too bad for me.


Yannick

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

Re: Gallery size miscalculated on retina displays

Width looks ok like this but the bottom half of the caption is still out of screen.

Try viewing the gallery on a web page of its own (a Gallery Index Page created by JuiceboxBuilder-Pro without any of your 'wrapper' code) to see if the same thing happens.

Also I noticed another little problem with the caption : caption does not display when the gallery is first displayed (only comes back when another image is displayed) if showSmallThumbsOnLoad is set to false.

Unfortunately, this is a known bug (caption initially hidden when setting captionPosition="BELOW_THUMBS" and showSmallThumbsOnLoad="FALSE"). However, the developers are aware of this issue and it should hopefully be fixed in a future version. In the meantime, possible solutions might be to:
(1) Set captionPosition to a value other than BELOW_THUMBS.
... or:
(2) Set showSmallThumbsOnLoad="TRUE" but also set firstImageIndex="1" so that the gallery skips the thumbnail page in Small Screen Mode and initially displays the first image in the gallery.

One last little thing : gallery appears wrong when coming out of expanded mode on retina displays : thumbs seem to have be enlarged a second time.

Do you see this problem in any of our own demo galleries here?
What device and browser are you seeing this problem in?

  • Registered: 2013-09-07
  • Posts: 17

Re: Gallery size miscalculated on retina displays

Hello ! Thanks for the tip for the caption on first gallery display, it worked for me.

As for the two other problems :

Try viewing the gallery on a web page of its own (a Gallery Index Page created by JuiceboxBuilder-Pro without any of your 'wrapper' code) to see if the same thing happens.

The problem also appears with the "Simple" demo if I add some thumb rows (max row columns = 5) and set thumb padding to something bigger (15 for example) : the caption appears half (or fully) off screen vertically.

Do you see this problem in any of our own demo galleries here?
What device and browser are you seeing this problem in?

The problem also appears on the Simple demo gallery.

I am using Google Chrome (36.0) on a Galaxy Pro 10.1 (SM-T520) android (4.4.2) tablet.

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

Re: Gallery size miscalculated on retina displays

Thank you for checking the demo galleries on your device.
I have notified the developers of both these issues and hopefully they will be fixed in a future version.

It looks like the first problem (the caption area spilling over outside the browser window) may be due to setting thumbNavPosition="BOTTOM" (in JuiceboxBuider-Pro's 'Customize -> Thumbnail' section) and the space required for the thumbnail navigation arrows below the thumbnails not being taken into account in the gallery layout. Try setting thumbNavPosition="CENTER" to see if this helps.
Another possible workaround until the bug is fixed might be to increase the maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

With regard to the second problem  (the thumbnails increasing in size when closing an expanded gallery for a second time), could you perhaps take a couple of screenshots of our Simple demo gallery (before and after the issue occurs) to illustrate the problem. (I do not have Galaxy Pro 10.1 on which to test.) Thank you.
Unfortunately, I do not think that there is an easy workaround for this problem.

7 Reply by yannick (edited by yannick 2014-08-25 12:34:26)

  • Registered: 2013-09-07
  • Posts: 17

Re: Gallery size miscalculated on retina displays

Try setting thumbNavPosition="CENTER" to see if this helps.

Another possible workaround until the bug is fixed might be to increase the maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section)

Both of these workarounds do get around the problem. For various reasons I'll stick with mine (decreasing max number of rows) for now but that's good to know. Thanks for your help !

With regard to the second problem  (the thumbnails increasing in size when closing an expanded gallery for a second time), could you perhaps take a couple of screenshots of our Simple demo gallery (before and after the issue occurs) to illustrate the problem.

Sure :-)
I left the screenshots full-size so you can have the right size for everything.
1. First display
2. Expanded
3. Back from full screen

I really appreciate the quality of the support. Almost compensates for the gallery not being open sourced :-)

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

Re: Gallery size miscalculated on retina displays

Many thanks for the screenshots.
I have passed them on to the developers.

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

Re: Gallery size miscalculated on retina displays

The bug referred to above (whereby the caption for the first image fails to display) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.