• Registered: 2013-01-02
  • Posts: 5

Topic: backgroundcolor at "slide-modus"

Hello together,
at my gallery i had a background image at the thumbnails
that you can see if you slide the main image slow.

www.portfolio-noir.com/TEST/TEST2/

i dont want to see the background image at "sliding the main image"
(the frame around the thumbnails is the background image)

is it possible?
can anybody help me, please?

cheers & greetings
eric

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

Re: backgroundcolor at "slide-modus"

You could perhaps use the Juicebox-Pro API, specifically the onShowThumbs() event, to change the background of your gallery depending on whether or not the thumbnails are displayed.
The online demo notes in the 'API Output' text area when the thumbnails are displayed or hidden. You could view the source of the page in your browser and modify it to suit your own needs. Please note that knowledge of JavaScript will be required.

  • Registered: 2013-01-02
  • Posts: 5

Re: backgroundcolor at "slide-modus"

:-/
can you give me a example?
please.
thank you for help

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

Re: backgroundcolor at "slide-modus"

This embedding code will display one image (via CSS) as a background to the gallery when the thumbnails are displayed and a different image when the thumbnails are hidden. In order for the background to be visible, the gallery's own background must be transparent.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    jb = new juicebox({
        containerId: 'juicebox-container',
        backgroundColor: 'rgba(0,0,0,0)'
    });
    
    jb.onShowThumbs = function(isShowing) {
        var element = document.getElementById('juicebox-container');
        var image;
        if (isShowing) {
            image = 'image1.jpg';
        } else {
            image = 'image2.jpg';
        }
        element.style.backgroundImage="url('" + image + "')";
    };
</script>
<div id="juicebox-container" style="background-image: url('image1.jpg');"></div>
<!--END JUICEBOX EMBED-->
  • Registered: 2013-01-02
  • Posts: 5

Re: backgroundcolor at "slide-modus"

hello & thanks.
i copy the images 1 & 2 in the main file folder and the part:

<div id="juicebox-container" style="background-image: url('image1.jpg');"></div>

works fine. but in this part:

jb.onShowThumbs = function(isShowing) {
        var element = document.getElementById('juicebox-container');
        var image;
        if (isShowing) {
            image = 'image1.jpg';
        } else {
            image = 'image2.jpg';
        }
        element.style.backgroundImage="url('" + image + "')";

.
must be something wrong.
it doesent work
:-/

sorry & please help

www.http://portfolio-noir.com/TEST/TEST2/black-and-white.htm

thanks a lot!!

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

Re: backgroundcolor at "slide-modus"

I tested the code before I posted it and it worked OK in my test gallery.

I notice that your web page looks to be a combination of two or more web pages as it has 2 different Doctype Declarations (one half way down the page) and multiple <html>, <head> and <body> tags (some with missing end tags).
Try validating the page with the W3C Markup Validation Service and fix the errors reported.
Once your page validates correctly, it should be rendered with greater predictability and consistency across different browsers.

  • Registered: 2013-01-02
  • Posts: 5

Re: backgroundcolor at "slide-modus"

:-/
sorry again
:-/

i load only the original files from juiceboxbuilder pro in the file folder
and modifikate only the original index.htm 1:1 like the dicreption.
the image1.jpg & image2.jpg are in the file folder too.

the W3C Markup Validation Service say´s -> OK

http://portfolio-noir.com/TEST/TEST2/

please rescue me


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            jb = new juicebox({
                containerId: 'juicebox-container',
                backgroundColor: 'rgba(0,0,0,0)'
            });

            jb.onShowThumbs = function(isShowing) {
                var element = document.getElementById('juicebox-container');
                var image;
                if (isShowing) {
                    image = 'image1.jpg';
                } else {
                    image = 'image2.jpg';
                }
                element.style.backgroundImage="url('" + image + "')";
            };
        </script>
        <div id="juicebox-container" style="background-image: url('image1.jpg');"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

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

Re: backgroundcolor at "slide-modus"

Your gallery uses Juicebox-Pro v1.1.1.
The onShowThumbs() API Event (which the code uses) was introduced in Juicebox-Pro v1.2.0.
Please see the Version History for a full list of changes.

Please upgrade your gallery to the latest version of Juicebox-Pro by following the instructions here.

9 Reply by eric-st (edited by eric-st 2013-01-12 12:18:40)

  • Registered: 2013-01-02
  • Posts: 5

Re: backgroundcolor at "slide-modus"

...i have done all.
it will not work
:(

http://portfolio-noir.com/TEST/TEST2/

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

Re: backgroundcolor at "slide-modus"

The code definitely works as I tested it before posting, so if you persevere, I am sure that you will get it to work.
However, unfortunately, the URL you provided in your last post leads to an error 403 (Forbidden) so I am currently unable to take a look at your gallery to see what the problem might be.