• Registered: 2013-01-25
  • Posts: 15

Topic: Is there a way to add an <hr> between thumbs and image?

Is there a way to add an <hr> between thumbs and image? I also wanted the caption between the thumbnails (on top) and the main image (on bottom) but when I do that they only intermittently appeared. I ended up with them on bottom, but had to use a hard background on them and so end up truncating the main image.

Also, is there a way to subtly hint that autoplay is available? I am thinking maybe some kinda of timer with a notice "Use spacebar to autoplay gallery images" for a few seconds before loading in the gallery?

Any ideas appreciated!

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

Re: Is there a way to add an <hr> between thumbs and image?

Is there a way to add an <hr> between thumbs and image?

No. Introducing a new element with a finite height would likely displace other elements within the gallery.

I also wanted the caption between the thumbnails (on top) and the main image (on bottom) but when I do that they only intermittently appeared.

Using thumbsPosition="TOP" and captionPosition="BELOW_THUMBS" should work OK (though you may need to change the default value for the maxCaptionHeight configuration option). If your captions display only intermittently, please post the URL to your gallery so that I can take a look.

Also, is there a way to subtly hint that autoplay is available? I am thinking maybe some kinda of timer with a notice "Use spacebar to autoplay gallery images" for a few seconds before loading in the gallery?

There are many ways in which this could be achieved.
Here is a simple example (using jQuery) which displays a message and automatically fades it out after 5 seconds.
Create a sample gallery with JuiceboxBuilder-Pro and use the code below as your gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #message {
                background-color: #acc2e3;
                position: absolute;
                top: 50px;
                left: 20px;
                font-size: 20px;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
                width: 350px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container'
            });
            setTimeout(function(){
                $("#message").fadeOut("slow");
            }, 5000)            
        </script>
        <div id="juicebox-container"></div>
        <div id="message">Use spacebar to autoplay gallery images.</div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

3 Reply by debart (edited by debart 2013-04-28 19:03:09)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Steven wrote:

Is there a way to add an <hr> between thumbs and image?

No. Introducing a new element with a finite height would likely displace other elements within the gallery.

I also wanted the caption between the thumbnails (on top) and the main image (on bottom) but when I do that they only intermittently appeared. Using thumbsPosition="TOP" and captionPosition="BELOW_THUMBS" should work OK (though you may need to change the default value for the maxCaptionHeight configuration option).

I tried all kinds of maxcapheight values, but it was difficult not knowing whether these were relative or absolute and where it was measured from.

If your captions display only intermittently, please post the URL to your gallery so that I can take a look.

I will post a 2nd gallery so that you can see what happens when I do that. The working gallery I have is at:

http://www.frontiernet.net/~debartsservices/sfrgallery/

The only problem I had was in checking it with an android tablet the first image came up large and covering the whole left side of the screen while the rest of the page looked normal and worked normally too with the autoplay working away behind the large first image.

Also, is there a way to subtly hint that autoplay is available? I am thinking maybe some kinda of timer with a notice "Use spacebar to autoplay gallery images" for a few seconds before loading in the gallery?

There are many ways in which this could be achieved.
Here is a simple example (using jQuery) which displays a message and automatically fades it out after 5 seconds.

Great. I'll give it a try on the 2nd gallery which I will put at:

http://www.frontiernet.net/~debartsservices/sfrgallery2

It actually works. I have an image I would like to have at the page top that I can't get it to show. I also redid the captionPosition="below_thumbs" to show you what happens if I do that (it also messes with the spacebar notice).


Let me know what you think.

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

Re: Is there a way to add an <hr> between thumbs and image?

Try using a high 'z-index' value for the message <div> so that it is stacked on top of all other elements on your web page, e.g.:

#message {
    z-index: 9999;
}

5 Reply by debart (edited by debart 2013-04-29 16:02:11)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Steven wrote:

Try using a high 'z-index' value for the message <div> so that it is stacked on top of all other elements on your web page, e.g.:

#message {
    z-index: 9999;
}

Thanks, but that didn't help. I can see the title image and the spacebar message briefly (http://www.frontiernet.net/~debartsservices/sfrgallery2) before the jb gallery loads over them. It still seems to have intermittent captions too even tho I changed the caption to "bottom".

The gallery that seems to work is (http://www.frontiernet.net/~debartsservices/sfrgallery). I may try and use the one that works and see if I can get the spacebar message to work there.

OK, I tried that and I can get the main image to load and the spacebar message displays, but then is immediately overwritten by the gallery load. All I need to do now is delay the gallery load until after the timeout.

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

Re: Is there a way to add an <hr> between thumbs and image?

Try fixing the HTML errors on your http://www.frontiernet.net/~debartsserv … rgallery2/ page. You can check the validity of your code with the W3C Markup Validation Service.
Using the original code I posted above (without the 'z-index' value) seems to work OK for me. I repositioned the message so that it was on top of the image area and the message was not obscured by the gallery as it loaded.

7 Reply by debart (edited by debart 2013-04-30 13:23:38)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Steven wrote:

Try fixing the HTML errors on your http://www.frontiernet.net/~debartsserv … rgallery2/ page. You can check the validity of your code with the W3C Markup Validation Service.
Using the original code I posted above (without the 'z-index' value) seems to work OK for me. I repositioned the message so that it was on top of the image area and the message was not obscured by the gallery as it loaded.

OK, did that, but most of the remaining errors are from juicebox noscript area. Still not sure where you placed #message to get it to show.

Wouldn't it be easier to simply delay loading the gallery until after the msg fades?

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

Re: Is there a way to add an <hr> between thumbs and image?

OK, did that, but most of the remaining errors are from juicebox noscript area.

These errors are due to your image filenames having spaces in them. It is true that the spaces should be encoded but as the image filenames form part of a URL when uploaded to your web server, it would be wise to use only web-safe characters.
Please see section 2.3 of this document for details.

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

Still not sure where you placed #message to get it to show.

On further investigation, my code works fine in a gallery using default settings.
However, when using the settings from your gallery's XML file, the message is, indeed, hidden when not using the 'z-index' value. Using the z-index: 9999; value seems to solve the problem fine.
Here is a test gallery [test gallery removed] using a couple of my own images and the configuration options from your gallery.
The message is not ideally placed but should be overlapping the main image and should be clearly visible at all times (until it fades out).

Wouldn't it be easier to simply delay loading the gallery until after the msg fades?

You could do this if you like but the solution above works fine (at least in my test gallery) and avoids having to introduce an unnecessary delay before the gallery starts to load.

I also wanted the caption between the thumbnails (on top) and the main image (on bottom) but when I do that they only intermittently appeared.

On further investigation, this is due to a bug which appears only when using imageTransitionType="CROSS_FADE" in conjunction with setting the captionPosition to either BELOW_IMAGES or BOTTOM.
I have logged a bug report and the issue should be fixed in the next version of Juicebox-Pro but, until then, a suitable workaround might be to use imageTransitionType="FADE" instead.

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Well thanks for all your efforts. I'm off to try and fix it all.

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

debart wrote:

Well thanks for all your efforts. I'm off to try and fix it all.

Got them all taken care of except for 2 odd things. Everything now works, except you have to click the mouse button somewhere on the page before you can get the spacebar to work and often on first opening the page the thumbs won't load. When the page loads you can hit the spacebar to your heart's content and nothing seems to happen. You have to click someplace on the page to get it to run and the thumbs to load.

http://www.frontiernet.net/~debartsserv … rgallery2/

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

Re: Is there a way to add an <hr> between thumbs and image?

Everything now works, except you have to click the mouse button somewhere on the page before you can get the spacebar to work

It is necessary to click somewhere within the gallery to bring the gallery into focus and enable the keyboard controls.
This is normal behavior.

and often on first opening the page the thumbs won't load.

I have just viewed your gallery in 5 different browsers (none of which have previously displayed your web page or cached any of your images) and your thumbnails displayed with no problem in all 5.
Hopefully it is just a temporary glitch with either your web server or internet connection but if the problem continues for you, please let me know which browser(s) it happens in.

Also, you could try upgrading your gallery from Juicebox-Pro v1.3.0 to the latest version (v1.3.1) by following the instructions on this page to see if it makes a difference.

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

I have just viewed your gallery in 5 different browsers (none of which have previously displayed your web page or cached any of your images) and your thumbnails displayed with no problem in all 5.

Yes, it seems to work ok in safari, firefox, opera and seamonkey. It just does it in Chrome AFAIK.

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

Re: Is there a way to add an <hr> between thumbs and image?

Chrome (v26) was one of the 5 browsers I checked your web page in.
I just checked your web page again in Chrome (both before and after clearing the cache) and your thumbnails appeared both times with no problems.
Try clearing your own browser's cache before reloading your gallery to see if this makes a difference.

14 Reply by debart (edited by debart 2013-05-10 18:05:48)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Dear JB Support,

On to another problem: I am trying to enter caption data in the config file and it doesn't show. Is there a setting I am missing?



http://www.frontiernet.net/~debartsserv … rgallery2/

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

Re: Is there a way to add an <hr> between thumbs and image?

You need to increase your gallery's maxCaptionHeight (from 50 to perhaps 100) to allow more space for the captions to be displayed.

16 Reply by debart (edited by debart 2013-05-11 06:07:27)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Steven wrote:

You need to increase your gallery's maxCaptionHeight (from 50 to perhaps 100) to allow more space for the captions to be displayed.

Tried that without joy. Set it to 200 and got nada.

Tried removing info from title and then the caption showed. The other titles were unchanged and displayed. It's like it's an exclusive or - either title or caption but not both. I'd like to have both, centered, with title on top and caption below. Is there a way to do that?

Oh, and is it possible to control the text font?

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

Re: Is there a way to add an <hr> between thumbs and image?

Tried that without joy. Set it to 200 and got nada.

Increasing the maxCaptionHeight should work fine (and does in my own test galleries).
I notice that your gallery still uses maxCaptionHeight="50". (Perhaps you changed it back.)
Be sure to clear your browser's cache after making any changes to ensure that your browser does not use an older version of your gallery's XML file.

Tried removing info from title and then the caption showed.

That is because, at present, there is enough height in your caption area to display only one or the other (and the first line of text, whether it is the title or the caption, will be displayed.

I'd like to have both, centered, with title on top and caption below. Is there a way to do that?

Yes. Use both the title and caption fields and set captionHAlign="CENTER". However, when using captionPosition="BELOW_THUMBS" (as your gallery does), a maxCaptionHeight of 50 is not large enough to allow both the title and caption to be displayed.

Oh, and is it possible to control the text font?

Yes. Use the galleryFontFace configuration option (in the 'Customize -> General' section of JuiceboxBuilder-Pro).

18 Reply by debart (edited by debart 2013-05-12 01:53:38)

  • Registered: 2013-01-25
  • Posts: 15

Re: Is there a way to add an <hr> between thumbs and image?

Checked it all and finally got it to work. It's a pain to clear the cache in chrome. My bad.

Oh, and is it possible to control the text font?

Yes. Use the galleryFontFace configuration option (in the 'Customize -> General' section of JuiceboxBuilder-Pro).

Where can I find that in my already built gallery? (IOW I don't want to have to rebuild the gallery). Is it possible?

And I would like to add an image <a href> to the lower right of the main gallery image. Is this also possible?

And finally, it does not display in IE correctly for my client. There is a huge space between the caption and the main image. It works in seamonkey, safari, opera, firefox and chrome, but IE doesn't render:

www.susanferrarirowley.com/sfrgallery2

I am going to try setting the overflows to 'scroll' and see if that'll help.

That may have helped (at least I can scroll Windows 7 IE to see the main image). It also helped to up the screen resolution from 800. Now all I have to do is explain to the client why it looks bad on their computer :-0

Thanks for your patience in all this.

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

Re: Is there a way to add an <hr> between thumbs and image?

Where can I find that in my already built gallery? (IOW I don't want to have to rebuild the gallery). Is it possible?

Open and edit your gallery in JuiceboxBuilder-Pro v1.3.1 and enter the required font face into the 'Gallery Font Face' field (in the 'Customize -> General' section). Then save your gallery on the 'Publish' tab and re-upload the gallery to your web server.
Otherwise, just modify your gallery's XML file by opening the 'config.xml' file in a plain text editor and adding something like galleryFontFace="Courier" as an attribute to the opening <juiceboxgallery> tag.

And I would like to add an image <a href> to the lower right of the main gallery image. Is this also possible?

Add the link to your web page below your <div id="juicebox-container"></div>, e.g.

<div id="link" style="text-align: right;"><a href="http://www.example.com">Text</a></div>

And finally, it does not display in IE correctly for my client.

Try using a fixed height for your gallery (rather than 90%).
Also, if you would like your web page to display your header (with a fixed height) and have the gallery take up the remainder of the user's browser window (without any scroll bars), then take a look at the Using a Resizable Gallery with a Header support section here. There is an online example and you can view the source of the web page in your browser and copy or modify it as required.
The View Resizable Gallery with Top Menu Example has both a header and a footer and you could place your required link in the footer.