• gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Topic: Back (Home) Button and Thumbs icon on top of each other

When viewing on an iPhone (iOS 6.1 / iPhone4) I can find no way to have the Back button and the Thumbs icon on the same page.  They are always placed one on top of the other to the Top Left of the page.  How can I fix this?

You can see a test gallery here :  http://qr-presse.com/index.html

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

Re: Back (Home) Button and Thumbs icon on top of each other

When I view your gallery on an iPod Touch 4 iOS 6.1, your 'Toggle Thumbnails' button is positioned top-left and your 'Back Button' is positioned top-right.
Try clearing your browser's cache in case your browser is hanging onto and use older versions of your gallery files.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Back (Home) Button and Thumbs icon on top of each other

You used to be able to clear iOS cache in Settings, but now (iOS 6.x) it clears 'Cookies and Data'.  Is there another way?

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Back (Home) Button and Thumbs icon on top of each other

Steven wrote:

When I view your gallery on an iPod Touch 4 iOS 6.1, your 'Toggle Thumbnails' button is positioned top-left and your 'Back Button' is positioned top-right.
Try clearing your browser's cache in case your browser is hanging onto and use older versions of your gallery files.

I had in fact temporarily changed the Screen Mode from Auto to Large, which is why it worked for you.

When I choose Auto and view on an iPhone, it doesn't work properly.  Here are a couple of screen-grabs showing overlapped buttons and incorrectly placed text.

(For the grabs I set Screen Mode to Small, but it has the same effect as viewing on an iPhone with Auto.)

http://www.grantsymon.com/Grabs/JBx-Grab1.png
http://www.grantsymon.com/Grabs/JBx-Grab2.png

The test site is here : http://qr-presse.com/index.html

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

Re: Back (Home) Button and Thumbs icon on top of each other

Thank you for clarifying.
I have been able to replicate the issue you are experiencing and can confirm that it is due to the backButtonHAlign configuration option not being respected in Small Screen Mode.
I have logged a bug report and this should hopefully be fixed in the next version of Juicebox-Pro (although I do not know when this may be).
In the meantime, a suitable workaround would be to set buttonBarHAlign="RIGHT" and leave backButtonHAlign at its default value of 'LEFT'.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Back (Home) Button and Thumbs icon on top of each other

Thanks Steven.  Wilco.

BTW ... is there any way to remove/change the background colour of the Back Button?  Seems like it should be included with the other buttons' background settings.

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

Re: Back (Home) Button and Thumbs icon on top of each other

BTW ... is there any way to remove/change the background colour of the Back Button?

There is no configuration option to change the background color of the Back Button but this can be achieved by changing the background-color CSS rule for a.jb-go-back-icon on line 485 of the 'jbcore/classic/theme.css' file, e.g.:

background-color: rgba(0, 0, 0, .5);

The last parameter of the 'rgba' value (the alpha channel) is the opacity of the background (0 being transparent and 1 being opaque).
Please note that the line number refers to Juicebox-Pro v1.2.0.

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

Re: Back (Home) Button and Thumbs icon on top of each other

The backButtonHAlign configuration option has been designated as a Large Screen Mode option only in v1.3.0. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.