1 Topic by goldberry (edited by goldberry 2016-04-19 03:52:04)

  • Registered: 2016-04-04
  • Posts: 15

Topic: Presets, Gallery position [SOLVED]

Have been creating many Galleries to see what appeals to my wife for her site and have some questions that I cannot get answered with my search.

I am trying to get a handle on just what the presets are. It appears they just provide a starting point using different criteria but that you could start with almost any of them and make adjustments that would create any of the presets, is that correct or is there anything in some of the presets that cannot be achieved without using a specific preset?

Can you tell me just what Max caption height does? Changing this sometimes keeps the caption if 2 lines readable.

Some galleries I have made using thumbs right would look better if there was more space on the right side of the thumbs. I found that by putting the thumbs Nav arrow there but not needing it gave a bit more edge space. Is it possible to get more space? A work around seems to be to set the width at say 90% which if using a white background works to accomplish that but this will not work with a color other than white. I also see that if you use say 90% the web page defaults to the left. Is there any adjustments that would center the page?

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

Re: Presets, Gallery position [SOLVED]

I am trying to get a handle on just what the presets are.

The presets are just different combinations of configuration options and JuiceboxBuilder settings (such as gallery and image dimensions).
They are essentially quick ways of replicating some of the demo galleries found here.
You could achieve any preset by starting off with all default settings and changing values in JuiceboxBuilder's interface.

Can you tell me just what Max caption height does?

There is a short description of maxCaptionHeight in the Caption section of the Config Options page.

maxCaptionHeight

The height of the caption area. When captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the area uses this value. For OVERLAY captions this value determines the maximum possible height of a caption.

So when captionPosition is set to BELOW_IMAGE, BELOW_THUMBS or BOTTOM, the value of maxCaptionHeight is always used as the actual caption height. When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the value of maxCaptionHeight is used as the maximum caption height (the actual caption height might be smaller if the maximum is not required to display the caption in full).

Is it possible to get more space?

It is not possible to increase the space just at the right-hand side of a gallery (at least not by using the available configuration options) but you could increase the space surrounding all gallery elements by increasing the value of the stagePadding configuration option (in JuiceboxBuilder-Pro's 'Customize -> General section'.

Alternatively, if you just want to add some space to the right-hand side of your gallery, you could wrap the gallery in a parent container, reduce the gallery's width (to perhaps 90%) and make the parent container's background color the same as the gallery.
Here is an example.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        backgroundColor: 'acc2e3',
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        maxThumbColumns: '3',
        maxThumbRows: '3',
        thumbsPosition: 'RIGHT'
    });
</script>
<div id="parent" style="background-color: #acc2e3; width: 800px;">
    <div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->

Is there any adjustments that would center the page?

If you want to horizontally center the gallery container within a parent container, then replace:

<div id="juicebox-container"></div>

... with:

<div id="juicebox-container" style="margin: 0 auto;"></div>
  • Registered: 2016-04-04
  • Posts: 15

Re: Presets, Gallery position [SOLVED]

Thanks for the explanation on presets and caption height.

I am having a problem understanding how to deal with the example of wrapping the gallery in a parent container.

Do I incorporate that into the index.html file juicebox creates?

As an example this is my index file what do I need to do to get that gallery into the wrapper?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Current Work</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" />
    <meta name="description" content="Corrent Work" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Current Work" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="Corrent Work" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1>Current Work</h1>
                <p>Corrent Work</p>
                <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
                <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
                <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
            </noscript>
        </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

Sorry for my lack of knowledge on this.

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

Re: Presets, Gallery position [SOLVED]

I am having a problem understanding how to deal with the example of wrapping the gallery in a parent container.

Do I incorporate that into the index.html file juicebox creates?

Yes, you'll need to edit the 'index.html' file that JuiceboxBuilder-Pro creates in a plain text editor.
Put the entire 'juicebox-container' <div> inside another <div>.
In your case, change the embedding code portion of the code you posted to the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->

10% of the screen width (to the right-hand side of your gallery) will be empty space (the same color as your gallery's background).
Change the gallery's width from 90% to change the amount of space to the right-hand side of your gallery.

If you wanted to horizontally center the gallery in the parent container (so that there is 5% of the screen width empty at both sides of the gallery), then you could use the following embedding code (adding style="margin: 0 auto;" as an attribute to the 'juicebox-container' <div>).

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container" style="margin: 0 auto;">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->
  • Registered: 2016-04-04
  • Posts: 15

Re: Presets, Gallery position [SOLVED]

Thanks Steven, I had done what you indicated but the outcome was not correct.

Using your example it works perfectly.

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

Re: Presets, Gallery position [SOLVED]

The code I posted above (in my last post) is a modified version of your own code (the code you posted in your last post) so if you substitute your code for mine, it should work OK.

Please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.

  • Registered: 2016-04-04
  • Posts: 15

Re: Presets, Gallery position [SOLVED]

Sorry my post today confused things. Everything is now good.  Solved and happy.

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

Re: Presets, Gallery position [SOLVED]

No problem.
I'm glad you've got it working. Thank you for letting me know.

  • Registered: 2016-04-04
  • Posts: 15

Re: Presets, Gallery position [SOLVED]

I just noticed a problem with the final screen after changing the color scheme from white to a dark grey. The width of the screen shows 100% the new background color but on height the bottom 10% stays white.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Current Work</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" />
    <meta name="description" content="Corrent Work" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Current Work" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="Corrent Work" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '80%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(17,17,17,1)'
    });
    </script>
    <div id="parent" style="background-color: rgba(17,17,17,1); width: 100%;">
    <div id="juicebox-container" style="margin: 0 auto;">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1>Current Work</h1>
                <p>Corrent Work</p>
                <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
                <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
                <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
            </noscript>
        </div>
        </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

When checking the gallery screen on several different sized laptops  the main image overlapped the bottom so I changed imagescalemode from none to scale_down and then added padding to the image. In searching about the use of scale and scale_down I came across a post you had replied to https://juicebox.net/forum/viewtopic.php?id=1771
in which you had said "Set your gallery's dimensions to be percentages (rather than fixed pixel values) and ensure that all your gallery's parent containers also have percentage dimensions." Can I asume that Juicebox always uses % unless I specifically change to pixels?

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

Re: Presets, Gallery position [SOLVED]

The white space you are seeing below your gallery is part of the 'body' tag (rather than the 'juicebox-container' or 'parent' containers).
You'll need to set the background-color for the 'body' tag, too.
Change:

<style type="text/css">
    body {
        margin: 0px;
    }
</style>

... to:

<style type="text/css">
    body {
        background-color: rgba(17,17,17,1);
        margin: 0px;
    }
</style>

Can I asume that Juicebox always uses % unless I specifically change to pixels?

If you do not explicitly set galleryWidth or galleryHeight in your gallery's embedding code, then default values of 100% will be used.
If you set a value without a '%' character such as:

galleryWidth: "100",

... then Juicebox will read this as '100px', the same as using:

galleryWidth: "100px",
  • Registered: 2016-04-04
  • Posts: 15

Re: Presets, Gallery position [SOLVED]

Thanks Steven,  I did try entering the background color in the body tag and thought that because it didn't work that something in the program was stopping it. I looked back at my file and saw that I had entered it incorrectly.

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

Re: Presets, Gallery position [SOLVED]

You're welcome.