• Registered: 2014-06-23
  • Posts: 38

Topic: gray background transparent? [SOLVED]

Hello, it is possible for an embedded gallery to change the background transparent?
I want that the background image is visible.

Greetings from Hannover

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

Re: gray background transparent? [SOLVED]

You can give your Juicebox gallery a transparent background by setting the Background Color Opacity to '0' (zero) in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
The Opacity can be a decimal value from 0 (fully transparent) to 1 (fully opaque).

If you are setting the background color manually in your gallery's embedding code, then use something like:

backgroundColor: 'rgba(0,0,0,0)'

... where the fourth number in the rgba notation is the opacity (the alpha channel).

For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(0,0,0,0)'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

3 Reply by Daniel@Daniel-Schoenemann (edited by Daniel@Daniel-Schoenemann 2014-07-10 06:22:32)

  • Registered: 2014-06-23
  • Posts: 38

Re: gray background transparent? [SOLVED]

in which folder and file I can set the background color to "0"?
I want my existing galleries not again alll need to upload.

Here are my adjustments in the config.xml.

------------------

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery

    useFlickr="false"
    galleryTitle="Sommerfest 2014"
    textColor="rgba(255, 255, 255, 1)"
    thumbFrameColor="rgba(230, 15, 0, 0.8)"
    showOpenButton="true"
    showExpandButton="true"
    showThumbsButton="false"
    useThumbDots="false"
    useFullscreenExpand="true"

shareTwitter="true"
shareFacebook="true"
shareGPlus="true"
maxThumbRows="3"
imagePadding="10"
showNavButtons="true"
showImageNav="true"
navButtonIconSize="20"
buttonBarIconSize="20"
buttonBarPosition="TOP"
galleryTitleHAlign="CENTER"
galleryTitlePosition="TOP"
topAreaHeight="60"
buttonBarBackColor="rgba(51,51,51,0.0)"
buttonBarIconColor="rgba(255,255,255,1)"
buttonBarIconHoverColor="rgba(0,255,0,1)"
navButtonIconColor="rgba(255,0,0,1)"
navButtonIconHoverColor="rgba(0,255,0,1)"
navButtonBackColor="rgba(255,255,255,0.0)"
thumbSelectedFrameWidth="8"
thumbHoverFrameWidth="3"
languageList="Zeige Vorschaubilder|verstecke Vorschaubilder|Vollbildanzeige|Schliesse Galerie |Öffne Bild in einem neuen Fenster / Tab|Fotos|weiter|zurück|Play Audio|Pause Audio|Zeige Fotoinformationen|verstecke Fotoinformationen|Start AutoPlay|Stop AutoPlay|AutoPlay AN|AutoPlay AUS|Zurück|Kaufe dieses Foto / In den Warenkorb |Zeige auf Facebook|Zeige auf Twitter|Zeige auf Google+|Zeige auf Pinterest|Zeige auf Tumblr|of"
backgroundColor="rgba(0,0,0,0.1)"
captionBackColor="rgba(0,0,0,0.1)">

------------------

regards Daniel

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

Re: gray background transparent? [SOLVED]

You would change the background color in the embedding code in the HTML web page which contains your gallery (the page you view in your browser to see your gallery), not the gallery's XML file.
If you create a gallery with JuiceboxBuilder-Pro, then, by default, the gallery's HTML page will be called 'index.html'.
However, if you have embedded your gallery in another web page, then it is this web page that you will need to edit.

  • Registered: 2014-06-23
  • Posts: 38

Re: gray background transparent? [SOLVED]

I create my galleries with the Lightroom plugin.
The question is: which file on my ftp server I have to change?

  • Registered: 2014-06-23
  • Posts: 38

Re: gray background transparent? [SOLVED]

Ok I understood.
It is not necessary to modify the config.xml. I need to change only the index.html.
I have to create a gallery with JuiceboxBuilder-Pro and saved on my computer.
Then I changed the index.html just in the images folder in my stand the galleries copied to my ftp server and the old index.html overwritten.

Now the background is transparent.

Thank you

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

Re: gray background transparent? [SOLVED]

I create my galleries with the Lightroom plugin.

If you are creating your galleries with Lightroom and want to give your galleries a transparent background, just drag the Background Image Opacity slider down to 0% in the 'Web -> Juicebox -> Color Palette' control panel.
This will save you modifying any files (or creating a new 'index.html' file in JuiceboxBuilder-Pro and then uploading this file to the gallery folders on your web server).