• From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Topic: Joomla - embeded - background problem [SOLVED]

Hi,
I have just switched my site to joomla.
Because I now want to embed the juicebox galeries, I want two different background colours.
One for the embeded site, should be #f2f2f2 (Same as the 'normal' page) (Lite, general)
And one for the expanded mode, #22222 (Very dark) (Colour, expanded background colour)

URL: www.reisedampfer.de
Click Code: 'Reisen' => 'Norwegen' => 'Norwegen 2014'

Here I don't see any changes in the background. Tested with firefox and chrome, cache has been cleared.

Direct link:
http://www.reisedampfer.de/html5/norwegen_2014/
There I see the light grey (#f2f2f2) background.
If I switch to expand mode (http://reisedampfer.de/cms5/media/sonst … icebox.jpg) I still see the same background.

Am I doing something wrong?
Greets
Stephan

at_stephan's Website

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

Re: Joomla - embeded - background problem [SOLVED]

In your http://www.reisedampfer.de/html5/norwegen_2014/ page, your gallery's embedding code uses the following line:

backgroundColor: 'rgba(204,204,204,1)'

However, when you embed the gallery in your http://www.reisedampfer.de/app595898963 … wegen-2014 page, the embedding code uses the following line (resulting in a white background):

backgroundColor: "rgba(255,255,255,1)"

Change the backgroundColor in the embedding code to either rgba(204,204,204,1) (to match the background color of your page) or rgba(0,0,0,0) (for the gallery's background to be fully transparent so that your own page's background shines through).

If you want to set a different color for the expanded gallery, use the expandedBackgroundColor configuration option (in JuiceboxBuilder-Pro's 'Customize -> Color' section).
Your gallery does not currently use an expandedBackgroundColor so the expanded background color will be the same as the normal (unexpanded) background color.

3 Reply by at_stephan (edited by at_stephan 2016-01-01 07:40:30)

  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Joomla - embeded - background problem [SOLVED]

Happy new year Steven and to all juicebox users,

Thank you for the quick reply, and the solution with transparent background for my first problem.

But the problem with the expanded background still exists.
I had already set the expanded background colour as you described it:
"And one for the expanded mode, #22222 (Very dark) (Colour, expanded background colour)"
Snapshot: http://www.reisedampfer.de/html5/juicebox_background_expanded.PNG

In the 'get embed code' I can't find something like 'expanded background colour ...' to change it manualy.
I use sw version 1.4.4.2.

Regards
Stephan

Update: I don't know why, but now it works with IE and Firefox. Chrome doesn't work at the moment, I deleted all browser data.

at_stephan's Website

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

Re: Joomla - embeded - background problem [SOLVED]

From your screenshot, it looks like you are using the default expandedBackgroundColor of #222222 and opacity 1.
If a default value is set in JuiceboxBuilder-Pro, then the corresponding option will not be written to the gallery's XML file.
Usually, if an option is not present in the settings, then when the gallery is displayed, Juicebox will use the default value.
However, if an expandedBackgroundColor is not explicity set in your gallery, then the actual expanded background color will be the same as the normal background color.
(This is the only option which does this.)

The solution is to make sure that there is an expandedBackgroundColor option present in your gallery settings.
Either:
(1) Change the expandedBackgroundColor (or its opacity) in the JuiceboxBuilder-Pro interface.
... or:
(2) Manually add the expandedBackgroundColor option to your gallery's settings. Instructions for setting options can be found here.

You could open your gallery's XML file in a plain text editor and add expandedBackgroundColor="rgba(34,34,34,1)" alongside all the other options (as an attribute to the opening <juiceboxgallery> tag) or add the following line in your gallery's embedding code in your HTML page (ensuring that all options are separated by commas):

expandedBackgroundColor: "rgba(34,34,34,1)",
  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Joomla - embeded - background problem [SOLVED]

Hi Steven,
thanks for the explanation, now everything works fine.
It was a bit tricky with the default color for the expanded bachground color, because it was the color I preferred.
Now I changed the opacity to 0.9.
I think it would be helpful to set a notice with the default color. I haven't noticed anything like this.
Greets
Stephan

at_stephan's Website

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

Re: Joomla - embeded - background problem [SOLVED]

thanks for the explanation,

You're welcome.

... now everything works fine.

That's great to hear. Thank you for letting me know.

It was a bit tricky with the default color for the expanded background color, because it was the color I preferred.

Although default values are not written to the gallery's XML file, you can use a custom background color and still use the default expanded background color by opening your gallery's XML file in a plain text editor and adding expandedBackgroundColor="rgba(34,34,34,1)" as an attribute to the opening <juiceboxgallery> tag.

If you like, you could set a non-default value for the expanded background color in JuiceboxBuilder-Pro so that there is an expandedBackgroundColor entry present in the gallery's XML file (as you are currently doing by changing the opacity to 0.9) and then just open the file in a plain text editor and change the value (in your case, change the opacity to 1).

  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Joomla - embeded - background problem [SOLVED]

Hi Steven,
thanks for the reply. I will check if I change the opacity in the XML file. But I think I will 0.9 in my preset, and that is ok for me.
Thank you for your fast support.
Greets
Stephan

at_stephan's Website