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

Topic: Button Bar to high in first image

I have changed the layout of my picture gallery and the button-bar is now in overlay_image position. I notice that with the first picture the button-bar is on top of the image on the thumbnail. At the moment my mouse hoovers on a image the button-bar is moving down in overlay-image position.

You can see it at https://afrika.delosgaia.nl/visit_to_ke … buru.htm#2 (foto's tab or photos tab when you translate the page).

Is this a bug?

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

Re: Button Bar to high in first image

I see the problem in your gallery occasionally (but not always) in Chrome 56 and IE11 (but I've not seen the problem in Edge, Firefox 51.0.1 or Opera 42).
However, I have been unable to reproduce the problem in a test gallery of my own (using the same configuration options that your gallery uses and using your custom theme).
It looks like it might be a difficult problem to troubleshoot.

It looks like it might be some kind of timing problem. Juicebox might be positioning the Button Bar at the top of the page before knowing that the thumbnails are there. If this is the case, then it's certainly strange that I cannot reproduce the problem myself.

Try taking the gallery out of your web page and make it a standalone gallery (with no other content on its page) to see if this makes a difference and to see if the code on your web page is somehow contributing to your problem.
Also, it would be easier to troubleshoot a standalone gallery (with no external influences) and figure out which combination of configuration options is causing the problem (if, indeed, this is the cause).

Try also using the stock 'theme.css' file just in case any of your custom CSS is interfering. It doesn't look like it is but the more we can strip back, the more we can eliminate as being a possible cause.

I do not see any custom CSS on your web page which should be interfering with your gallery's Button Bar position but I might be missing something so have a look and see if you can find any custom CSS which the gallery might be inheriting.

Being that it looks to me like a timing problem, you might also like to try changing internal timings (such as displayTime and imageTransitionTime) to see if this helps.

Also, for testing purposes, try adding a delay before the loading of the gallery when the 'Foto's' link is clicked.
I'm not sure what this will tell us but it's something I would try out of interest.

I realise that the suggestions above might not be ultimate solutions but they might at least help to track down the cause of the problem and, if it turns out to be a bug in Juicebox, I can at then log a bug report with the developers.

Thank you.

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

Re: Button Bar to high in first image

Hi Steven,

It is certainly possible that it is a timeout. This is the original gallery without the page itself:

https://afrika.delosgaia.nl/picturegall … index.html

and I don't see the problem.

I am going on with testing.

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

Re: Button Bar to high in first image

Thank you for trying the gallery on its own.

I've just tried dynamically switching between two galleries in the same container (using a JavaScript function to go from a default gallery to one using your gallery's configuration options without refreshing the web page and without any delay) but I still can't reproduce the problem.

Hopefully your own testing will prove to be fruitful.
Please let me know if you find anything.
Thank you.

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

Re: Button Bar to high in first image

I have made the following work-around and this is working:

jb2.onInitComplete = function() {jb2.showImage(1);}

The problem does not exist in mobile browsers of any kind, Windows 10 mobile, Android or Apple. My gallery is always in Large mode.

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

Re: Button Bar to high in first image

I'm still not sure what the root of the problem is but as neither of us can replicate the problem in a standalone gallery or stripped back test case, I can't help but think that the surrounding code on your web page must somehow be contributing to the problem.

I'm glad you've found a workaround. Thanks for sharing.

It's interesting that I only ever saw the problem (occassionally) in Chrome and IE11 and that you've never seen the problem on any mobile device. Maybe we can keep an eye on browser updates to see if this somehow solves the problem in the future without any further action.

Once again, I appreciate you keeping this thread up to date with your progress.
If I can reproduce the problem and create a bug report that the developers can work with, I'll certainly do so but, at the moment, the problem seems to be present only in your web site (no other users have reported this issue) and only in certain desktop browsers. It's a tricky one to troubleshoot for sure.

The best way to tackle it would probably be to copy your web page (to create a test environment) and then remove elements (external CSS and JavaScript) one by one until the problem no longer occurs and you find the cause of the problem. However, as you've found a workaround, I would understand if you'd rather just leave things as they are.