• Registered: 2017-01-21
  • Posts: 4

Topic: Password Page Adding Background Image

Where do I specify the background image in order to get it to appear on the login or password page?
I had it working. But I can't remember what I did. I assume its in the theme.css. Do I have to make the background color transparent as well?

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

Re: Password Page Adding Background Image

Try using something like the following CSS in the <head> section of your gallery's web page (and make sure that the path to the image is correct):

<style type="text/css">
    #juicebox-container {
        background-image: url("images/background.jpg");
    }
</style>

A slight drawback to this would be that if the gallery's page is reloaded after the password is entered, you'd briefly see a flash of the image before the gallery is rendered.

An alternative would be to set the background for just the login page container (rather then the 'juicebox-container').
However, it is an anonymous <div> with no CSS id or class and it will not be present on the page until after the Document Object Model is ready so you might need to use JavaScript with a short delay.
You could try something like the following:

<script type="text/javascript">
    $(document).ready(function() {
        window.setTimeout(function() {
            if ($('.jb-flag-fullscreen').length) {
                $('html').css('height', '100%');
            }
            if ($('#jb-dialog-login-form').length) {
                $('#jb-dialog-login-form').css('background', 'initial');
                $('#jb-dialog-login-form').parent().css('background-image', 'url("images/background.jpg")');
            }
        }, 2000);
    });
</script>
  • Registered: 2017-01-21
  • Posts: 4

Re: Password Page Adding Background Image

Thanks Steven.

The first method didn't work for me. I got the flash of the background image and then the page reverted to the default black and stayed there.

The java script works -- it's not exactly elegant -- with the flash of the image -- blackout delay - and then the page appears. My site is purely for private family use so no harm but I doubt most people would find it acceptable.

It seems to me there such be a better solution.

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

Re: Password Page Adding Background Image

You shouldn't get a flash of the image using the JavaScript solution (the two suggestions were not intended to be used together) but, agreed, it's not the most elegant solution.

Here's a slightly better JavaScript version which minimizes the delay by looking out for the 'jb-dialog-login-form' container to appear in the DOM and applying the background-image to it as soon as it is ready. (It relies on your gallery container being named 'juicebox-container' but you can change this if you like.)

<script type="text/javascript">

    $(document).ready(function() {

        var flag1 = false, flag2 = false;

        var observer = new MutationObserver(function(mutations, instance) {
            if (!flag1 && $('.jb-flag-fullscreen').length) {
                $('html').css('height', '100%');
                flag1 = true;
            }
            if (!flag2 && $('#jb-dialog-login-form').length) {
                $('#jb-dialog-login-form').css('background', 'initial');
                $('#jb-dialog-login-form').parent().css('background-image', 'url("images/background.jpg")');
                flag2 = true;
            }
            if (flag1 && flag2) {
                instance.disconnect();
            }
        });

        var juicebox = document.getElementById('juicebox-container');

        observer.observe(juicebox, {
            childList: true,
            subtree: true
        });    

    });

</script>

Perhaps you'd like to suggest this as an idea for a future version in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.

  • Registered: 2017-01-21
  • Posts: 4

Re: Password Page Adding Background Image

I really appreciate your help. I'll stick with the second method.

I might have something set in the theme.css or somewhere else that conflicts with both your first suggested solution and the third one. Neither of those works for me.

Your first script works well enough for me.

Thanks for your help again. I'll post something about this in the features request thread.

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

Re: Password Page Adding Background Image

You're welcome.

I've just noticed that my JavaScript code above does not work for a 100% x 100% gallery with no other content on the page. I have amended the code in the posts above to work for all gallery sizes.