1 Topic by russianbear76 (edited by russianbear76 2015-08-27 08:38:09)

  • Registered: 2015-08-27
  • Posts: 4

Topic: Different Style/Look for Small vs Large Screen

Is there a way to configure large screen options different from small screen. For example rounding image corners with using a a border (frame) will generate a borderless yet rounded image in small-screen mode. this is not a good design option as it crops parts of the actual image by rounding the corners. Is there a way to fix it or allow different styling for small vs large screen.

Another question I would like to have button size at 20 px while in large-screen mode and 16px when seen on a smartphone...
Can this be done.

I would really love to see separate tabs that allow you to configure each type of screen.  And the app must have a switch that changes the preview from large screen to small screen. (you cannot have a clear idea until it is published on the server and tested)

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

Re: Different Style/Look for Small vs Large Screen

A Juicebox-Pro gallery uses the same set of configuration options for both Small Screen Mode (SSM) and Large Screen Mode (LSM). It is not possible to have two different sets of values and switch between them and it is not possible to change configuration option values once a gallery has been loaded. The gallery would need to be reloaded with new values.
Technically, you could load the gallery, check whether SSM or LSM is being used (via the Juicebox-Pro API getScreenMode() method) and then reload the gallery using a specifc XML file corresponding to the screen mode being used. However, this is not an ideal solution.

There are some configuration options which are specific to the different screen modes (e.g. showThumbsOnLoad is for LSM only whereas showSmallThumbsOnLoad is for SSM only) but other options such as buttonBarIconSize apply equally to both SSM and LSM.

If you want to configure Juicebox-Pro beyond what can be achieved with the available configuration options, you can certainly try modifying the 'jbcore/classic/theme.css' file. However, knowledge of CSS would be required and such modifications would not be officially supported. Also, you might find that you run into unforeseen problems as Juicebox will not know of any modifications made to this file and if any changes that you make alter the size or position of any gallery elements, there may be unwanted knock-on effects with regard to the gallery layout.

Here are a few other notes which may help.

For example rounding image corners with using a a border (frame) will generate a borderless yet rounded image in small-screen mode.

Unfortunately, the frameWidth configuration option is LSM only.

Another question I would like to have button size at 20 px while in large-screen mode and 16px when seen on a smartphone...

Please see this forum thread.

And the app must have a switch that changes the preview from large screen to small screen.

You can check how your gallery looks in SSM by setting screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.

If you find there are things that you would like to do that currently cannot be done (or at least not easily), then please post your suggestions in the Feature Requests forum thread. This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.