• Registered: 2012-05-01
  • Posts: 97

Topic: Screenmode Auto

I am building a new website and has set the screenmode= auto. I notice that the picture in the container_id with the request to open the gallery is smaller then the root DIV. This is my testsite

https://loesje.delosgaia.nl/#Introductie and open it in a mobile device <1024 or in Chrome with F12 set for mobile devices.

The DIV with class jb-splash-background has width: 365px just as the root div. Container_ID (box_slideshow) has size 331.375 px. It seems that the negative left margin I have used is subtracted from the actual width.

Is this a bug or an error in my design?

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

Re: Screenmode Auto

I see the difference in widths between the id="box_slideshow" and class="jb-splash-background" containers when I view your gallery in a narrow viewport (< 1024px), changing the user agent string in order to view the Splash Page, but I have been unable to replicate the problem in a test scenario of my own.
I embedded several galleries on a test page (gallery vs Splash Page, with and without a CSS margin being applied to the gallery container, with and without a CSS padding being applied to the gallery container) but do not see any discrepancy in the widths of the id="box_slideshow" and class="jb-splash-background" containers.

I can't quite wrap my head around the problem in your web page as you are using custom embedding code and there is a lot of external CSS to look through with many CSS margin rules (and I do not know how many, if any, are relevant to the problem at a glance).

Please take another look at your code (check all your CSS margin and padding values) to see if you can determine the cause of the problem.
I cannot replicate the problem myself in a stripped back example so the cause may lie somewhere within your code (and you'll certainly have a better understanding of your own web page's code that I do).
I can't be sure that your code is at the root of the problem but, being that I have so far been unable to replicate the problem, it might be worth another look.

Maybe its simply a case of the class="jb-splash-background" container not inheriting custom CSS being applied to the id="box_slideshow" container, in which case, whatever custom CSS you apply to the id="box_slideshow" container, you could also apply directly to the class="jb-splash-background" container. Not an ideal solution, perhaps, but it should t least result in matching widths.

The problem could also be due to the way that custom CSS is being applied.
For example, when setting Juicebox's height to a percentage value, it may be necessary to explicitly set the height of its parent divs via inline CSS (as noted here).
It is just a thought but if you are not already doing so, maybe you could try using inline CSS to apply your margin.

I've checked my browser's developer tools but don't see any obvious custom CSS which is causing the problem so maybe the issue is somehow due to custom CSS being applied via JavaScript.
Again, I'm not sure about this at all, but it might be another avenue to investigate further.

I notice that you use setGallerySize(width: int, height: int) within onInitComplete.
Maybe this is the root of the problem and it would help to calculate the width and height of the gallery before the embedding code and then set the galleryWidth and galleryHeight within the embedding code (instead of afterwards via the Juicebox-Pro API methods).

I hope my notes above help to some degree.

  • Registered: 2012-05-01
  • Posts: 97

Re: Screenmode Auto

Hi Steven,
I have done what you advice but it did not help. I have solved it by changing the screenmode to large for this slideshow. It is not only the splashscreen that is to small but the whole small layout.

I do have to build a full gallery for the new website and let see if this is getting better.
Thanks for your help

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

Re: Screenmode Auto

I have done what you advice but it did not help.

I'm sorry to hear that my notes did not help.

I have solved it by changing the screenmode to large for this slideshow.

As you are aware of what is happening (visually and via your browser's developer tools), you can at least compensate for it (as you are doing).

It is not only the splashscreen that is to small but the whole small layout.

Thank you for the clarification. When you mentioned the jb-splash-background class, I though that the problem was specifically affecting the Splash Page (vs the gallery container). However, my own tests demonstrated that there was no difference between the gallery itself and the Splash Page (as you have just confirmed) but also that there was no discrepancy between the widths of the containers that you mentioned (unlike your own embedded gallery).

It is very difficult to pinpoint the exact cause of the problem in such a complex web page with so much going on.
If you can construct a minimal test case which exhibits the problem, please post back so that I can investigate further.
Thank you.