• ixel
  • Member
  • Offline
  • Registered: 2016-05-26
  • Posts: 7

Topic: Gallery Differences Mobile Safari, Can't Remove Gradient [SOLVED]

Hello!
I got the latest version of Juicebox Pro working for my galleries, but the captions are not preserving their appearance on mobile Safari and I *still* can't get rid of the caption gradient that became default in 1.5.

http://kimkrauseartist.com/index_old.html <- This is the site I am testing on. You can see that the captions still have the new gradient, which I want to change to a flat 50% opacity.

http://imgur.com/a/CbZRE <- images showing my Color settings in the Juicebox Pro app (which are unclear, I can't even tell what some of them change), my config file to confirm, the demo appearance in the Juicebox app and the actual Safari iOS appearance

Any help is appreciated.


Sidenote: I was also wondering if it's possible to change the position for the next and last image arrow buttons. 1.5 changed them to be on top of the image rather than off, to the side.

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

Re: Gallery Differences Mobile Safari, Can't Remove Gradient [SOLVED]

I *still* can't get rid of the caption gradient that became default in 1.5.

Set both captionBackColor and captionBackTopColor (in JuiceboxBuilder-Pro's 'Customize -> Color' section) to exactly the same values (color and opacity).

captionBackTopColor has different default values for Large Screen Mode (rgba(0,0,0,0)) and Small Screen Mode (rgba(0,0,0,0.3)) so if you do not change captionBackTopColor in JuiceboxBuilder-Pro's interface, a captionBackTopColor value will not be written to the gallery's configuration file and the two default values will be used.

If you want to ensure that a single captionBackTopColor is used in both screen modes, change its color or opacity slightly from its default value. Then, to remove the gradient, set captionTopColor to exactly the same color and opacity as you've used for captionBackTopColor.

images showing my Color settings in the Juicebox Pro app (which are unclear, I can't even tell what some of them change)

Click on the small color box next to each color option and you'll see the exact hexadecimal color code that corresponds to the chosen color.

the demo appearance in the Juicebox app

Unfortunately, the integrated browser which comes bundled within JuiceboxBuilder-Pro does not support certain CSS3 properties (such as gradients and shadows) so the live preview will not be 100% accurate.
This is a known issue and is noted as such in the JuiceboxBuilder-Pro User Guide. Please view the gallery in a browser for a more accurate preview.

I was also wondering if it's possible to change the position for the next and last image arrow buttons. 1.5 changed them to be on top of the image rather than off, to the side.

Set imageNavPosition ('Customize -> Main Image') to STAGE rather that its default value of IMAGE. The main image navigation arrows will then be positioned relative to the stage rather than the images. However, please bear in mind that if the images take up a lot of the gallery's image area (which will depend on the gallery, image and browser window sizes), the navigation arrows may still be overlaid on top of the images. If this is the case, then you might like to compensate for it by increasing the imagePadding ('Customize -> Main Image').

3 Reply by ixel (edited by ixel 2016-07-17 17:20:16)

  • ixel
  • Member
  • Offline
  • Registered: 2016-05-26
  • Posts: 7

Re: Gallery Differences Mobile Safari, Can't Remove Gradient [SOLVED]

So I had to go back and manually enter the "new"(actually the same) values and resave, and reupload the updated files for each gallery. :I Then they still weren't showing the changes, so I had to empty cache/incognito mode to see that the changes had taken effect for some reason.

I'm glad 1.5 fixed a lot of problems, but there are *a lot of fiddly/unclear values* now.

Thank you, Steven, for your assistance.

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

Re: Gallery Differences Mobile Safari, Can't Remove Gradient [SOLVED]

You're welcome.
I'm glad you've got it working.

If there is a value for captionBackTopColor in the gallery's XML file, then this will be used for both Small and Large screen modes.
However, if you leave captionBackTopColor unchanged from the default value shown in the JuiceboxBuilder-Pro interface, then captionBackTopColor will not be written to the gallery's XML file and the two different default values (for Small and Large Screen Modes) will be used.

As long as captionBackColor and captionBackTopColor are both exactly the same (color and opacity) and set to non-default values (which ensures that they will be written to the gallery's XML file), then there should not be a caption gradient in either Small or Large Screen Mode.

As far as I can recall, captionBackTopColor is the only configuration option which has different default values for Small and Large Screen Modes, so you should hopefully not encounter any other oddities like this.

For reference (and any other users reading this thread), we have an FAQ regarding browser caching here:
When I update my gallery I don't see my changes online. Why?