• ps76
  • Member
  • Offline
  • From: Long Beach
  • Registered: 2014-09-08
  • Posts: 11

Topic: Turn off fade in on page load? [SOLVED]

Hi,

Is there a way to turn off the fade in of the jukebox gallery on page load? I've embedded the jukebox gallery on my website and now even my header with navigation fades in when I switch from one gallery to the other. I would like to prevent that from happening. (My image transition is set to SLIDE, which should have nothing to do with it)

Thanks,
Patrick

ps76's Website

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

Re: Turn off fade in on page load? [SOLVED]

Unfortunately, there is no configuration option that you can use to change the initial fade in of the gallery.
You could perhaps initially hide the 'juicebox-container' <div> using CSS and then show the gallery when Juicebox has completed initialization (when the Juicebox-Pro API onInitComplete event is fired).
Try something like the following. Create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #juicebox-container {
        display: none;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    jb.onInitComplete = function() {
        $('#juicebox-container').show();
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>
  • ps76
  • Member
  • Offline
  • From: Long Beach
  • Registered: 2014-09-08
  • Posts: 11

Re: Turn off fade in on page load? [SOLVED]

Thanks, I will give it a try. Thinking about it, maybe it would be better to leave the fade in on, but by using javascript tell e.g. the header not to fade in (as I have jukebox embedded in my own index.html the header always fades in when switching galleries...). Any ideas?

ps76's Website

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

Re: Turn off fade in on page load? [SOLVED]

Ideally, the fading in of a gallery should not affect other non-gallery elements on your web page.
Please post the URL to your web page so that I can take a look at the problem for myself and hopefully help further.

The solution might just be to change use or change some CSS selectors on your header but I should have a better idea of what the problem might be when I see your web page. Thank you.

  • ps76
  • Member
  • Offline
  • From: Long Beach
  • Registered: 2014-09-08
  • Posts: 11

Re: Turn off fade in on page load? [SOLVED]

Nevermind, it had somethings do with some other settings I had. Thanks and sorry about that!

ps76's Website

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

Re: Turn off fade in on page load? [SOLVED]

No problem. Just glad to hear that you've got it sorted. Thank you for letting me know.