The closest that you could get to this with Juicebox would be to display your gallery in Small Screen Mode (usually used on mobile devices) where thumbnails and images are displayed on separate pages (so that the main images can be given as much space as possible on small screens).

When the gallery is initially displayed, the user will be presented with a grid of thumbnails from which a main image can be selected.
When a thumbnail is selected, the thumbnail page is replaced with the chosen image (and the user can then navigate through the main images).
The user can return to the thumbnail page by clicking the 'Thumbnail' button on the gallery's Button Bar.

You can force a gallery to be displayed in Small Screen Mode by setting screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
Please note that screenMode is a Juicebox-Pro configuration option which is not supported by Juicebox-Lite, the free version.
For reference, a complete list of configuration options can be found here.

All thumbnails will be the same size as each other but you can determine the size via the thumbWidth and thumbHeight configuration options.

More information about Screen Modes can be found in the Gallery Tour.

Here's a demo gallery using Small Screen Mode.

I hope this points you in the right direction.

You're welcome!

Set 'Screen Mode' to 'SMALL' in JuiceboxBuilder-Pro's 'Customize -> General' section. (This is just a regular configuration option rather than a 'Preset'.)

The thumbnail page in Small Screen Mode displays the Gallery Title (above the thumbnails) so you could use the Gallery Title to display your "Return to more Images" message.
You can use HTML formatting within your Gallery Title (as noted in this FAQ) to turn the text into a link and change the text color to yellow.
Try entering the following as the 'Gallery Title' in JuiceboxBuilder-Pro's 'Customize -> Lite' section.

<a href="../index.html" style="color: #ffff00;">Return to more Images</a>

Please note that the 'href' attribute for the <a> tag can be a relative path (relative to the web page containing the gallery's embedding code) or an absolute path (in the form 'http://www.example.com/index.html').

Watermarks are added via the control panel in the lower left corner of JuiceboxBuilder-Pro's 'Images' tab (check out the first screenshot in the JuiceboxBuilder-Pro User Guide).
JuiceboxBuilder-Pro uses an image for the watermark (not text) and the chosen image is baked into the images when they are resized for the gallery.
Please see the 'Adding Watermarks' support section for a short description of the process.

No problem!

Now I see what you suggested for that title box we are almost there.

I really need three lines to get close to my existing system.

http://www.tonygamble.uk/Art_Gp_Recep_2018/index.html

The top line is the yellow one "Return to lots more Hurlingham Memories". I could not see how to make it centred. Can you do that for me - in fact all the title needs to be centred. I am using Bookman Antiqua or Times New Roman Serif if we can have that please.

The second line is my folder title. In this case "Art Group Reception". The colour is RGB 33B4CA. I am not sure what the font size is but you can see it is quite a lot larger than the 'return' line.

This second line I will need to change every time I create a new folder. What would you think is the easiest way of doing this?

My third line I am introducing as I don't see how one creates a 'footer' on Juicebox. Mine you will see is in blue and says 'All images copyrighted by Tony Gamble'. I am suggesting we put these on a small third line. They could go anywhere but I think they ought to be somewhere no matter how small.

With that we pretty well replicate what I have been doing with Turning Gate. I like the masonry effect of the thumbnails. I am guessing this is not achievable with Juicebox but it is no great loss. The speed and simplicity rather than having to rely on Lightroom to support TTG is such a plus.

I'm out this morning - London time. I have not yet worked out where you are supporting me from but I will pick up and follow up any suggestions in the afternoon.

Many thanks for your help. I realise you are not here to teach me html coding but often the way to learn fast is to create a need to learn it - and I have.....

Tony

Thanks for all that. I am not sure I'd want to go down the Showkase route if we can crack my needs within Juicebox.

I understand most of what you said but this is where I am a bit confused. You said:-

You can certainly add a third line to your Gallery Title if you like but the more you add to the Gallery Title, the more likely it is to overlap your images on a small screen. Juicebox was designed with the Gallery Title to be just a short, single line of text (and only enough space is reserved in the gallery for a single line of text). Juicebox itself will have no knowledge that your Gallery Title contains several lines of text (and in a larger font size).
If you want to include multiple lines of text and other content such as a copyright notice, then I would recommend displaying such information on the gallery's web page (but not inside the gallery itself).

Does this mean that the Juicebox has to live with the header and the footer all the time? What I like, if we can get it to work, is the fact that the 'Return to' and the Header disappear once one starts looking at the larger image. If I have to keep the header and footer then I don't think this is my way forward.

You have given me a suggested Gallery title. If I added a Copyright symbol followed by Tony Gamble, we could keep this on the same line as the Return to. Could you add this for me - maybe in the same blue as at the bottom of the sample I pointed you to?

What I had been thinking is that I'd hold these two lines of code on my PC desktop in a folder and I could easily modify the folder title before dropping it into the right place in Juicebox. I have not mentioned it so far but I have a couple of other menu systems which need different 'Return to' hyperlinks but with your two lines of code as a template it would be easy to create some variations.

I see what you mean about the overlapping but it would not bother me on a PC. I have yet to load it to my FTP to look at it on a phone, but so far I think it is something I could live with. You seem to have used a font with a shadow and that is a good way of ensuring it is relatively readable regardless of how light or dark the background is.

This web site is 98% an information service. I am not selling the pictures and craving a perfect showcase. As long as people can see (a) what is there and (b) the odd snap of themselves they will be happy.

Have you given me Times New Roman? I will read about Custom Faults.

I need, finally, to look at the Signature. Presumably I create a signature and save it to a jpg. Can you save me some experimenting time by suggesting the pixel width I need when creating the jpg?

Thanks as always for the help. It is brilliant.

Tony

If a gallery is embedded in a web page (alongside other content), then the gallery can be expanded (to fill the browser window) by clicking the 'Expand Button' on the gallery's Button Bar. Once the gallery has been expanded, visitors can navigate through your images (in the full-browser gallery) and then return to the embedding page by clicking the 'Close Gallery' button on the gallery's Button Bar.
Check out (and try expanding) this demo gallery which is embedded on a web page containing both a hear and footer.

Try:

<a href="/HurlList/" style="color: #ffff00; text-decoration: none;">Return to lots more Hurlingham Memories</a> | <span style="color: #33b4ca; ">© Tony Gamble</span><br /><br /><span style="color: #33b4ca; font-size: 48px;">Art Group Reception.</span>

At the moment, when I view your gallery on my iPod Touch, the display is less than optimal. The Gallery Title overlaps the thumbnails quite significantly and, with the size you have chosen for your thumbnails, only one thumbnail is displayed per page.
Please remember that Small Screen Mode was designed specifically with small screen devices in mind (and you are using it for both small and large screen devices).
Default settings may provide a more aesthetically pleasing display but I realise that the default settings do not provide the layout that you are hoping to achieve.
Hopefully you will be able to reach a compromise though (maybe by reducing the amount of Gallery Title text and reducing the thumbnail size or by using a page template with a header and/or footer to accommodate extra content).

The drop-shadow on the text is controlled by the textShadowColor configuration option (in JuiceboxBuilder-Pro's 'Customize -> Color' section), regardless of the font family being used. If you wanted to (just to let you know), you could remove the drop-shadow by setting textShadowColor="rgba(0,0,0,0)".

Not yet. Just set galleryFontFace="Times New Roman" (in JuiceboxBuilder-Pro's 'Customize -> General' section) or, to set the font family for just the Gallery Title, you could use:

<p style="font-family: Times New Roman;"><a href="/HurlList/" style="color: #ffff00; text-decoration: none;">Return to lots more Hurlingham Memories</a> | <span style="color: #33b4ca;">© Tony Gamble</span><br /><br /><span style="color: #33b4ca; font-size: 48px;">Art Group Reception.</span></p>

It sounds like you are referring to an image to be used as a Watermark. If so, then the image should ideally be a PNG image with a transparent background (as noted in the Adding Watermarks support section.
I can't really recommend a size for your watermark image. It's really a personal choice and depends on the resolution of your gallery images (the resized images for the gallery, not the source images) and how much coverage you want for your watermark.
If you want your watermark to span the entire width of of your gallery images, then make your watermark image the same width as your resize width. Otherwise, make it a little smaller. You should be able to find a suitable size with a little trial and error.

You're welcome!

Steven.

After a real struggle I have worked out how to use GIMP to produce text with a transparent background.

Now to re-look at the image sizes.

Tony

Take a look at the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header support section. (There's a link to this support section in one of my posts above.)
I was thinking that you could perhaps use this as a template for your own web page. The example has a header and footer, both with fixed heights (which you could change if you like), and the gallery takes up the remainder of the available space in the user's browser window.
You can view the source of the example in your browser and copy/modify it to suit your own needs (adding whatever content you like in the header and footer and swapping the sample gallery for your own). Some knowledge of CSS, HTML and JavaScript would be useful but the code should hopefully be fairly easy to follow.

In fact, here's a single page example which you can try.
To see it in action, just create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                height: 50px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #footer {
                background-color: #222222;
                bottom: 0px;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                height: 50px;
                left: 0px;
                padding: 10px 0px;
                position: relative;
                text-align: center;
                width: 100%;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
                var headerHeight = parseInt($('#header').outerHeight(true), 10);
                var footerHeight = parseInt($('#footer').outerHeight(true), 10);
                var galleryHeight = windowHeight - headerHeight - footerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }
            $(document).ready(function() {
                $(window).resize(doLayout);
                jb = new juicebox({
                    containerId: "juicebox-container"
                });
                doLayout();
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="header">
            <span>Header</span>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
        <div id="footer">
            <span>Footer</span>
        </div>
    </body>
</html>

You can change the header and footer content to whatever you like.
For example, the header container might look something like this:

<div id="header">
    <a href="/HurlList/" style="color: #ffff00; font-family: 'Times New Roman'; font-size: 24px; text-align: center; text-decoration: none;">Return to lots more Hurlingham Memories</a><br /><br /><span style="color: #33b4ca; font-family: 'Times New Roman'; font-size: 48px; text-align: center;">Art Group Reception.</span>
</div>

... and the footer container might look something like this:

<div id="footer">
    <span style="color: #33b4ca; font-family: 'Times New Roman'; font-size: 24px; text-align: center;">© Tony Gamble</span>
</div>

You might need to increase the height of the header to accommodate two lines of text (in the CSS at the top of the web page) or reduce the font size of the text but I hope this points you in the right direction and gets you started.

(The inline CSS in the sample header and footer containers above could quite easily be added to the CSS section at the top of the web page to make things a little easier to read if you like but this would make no functional difference to the web page and there would no measurable benefit to doing so in such a short web page.)

GIMP is certainly the program I'd personally recommend (for those who do not have Adobe Photoshop).
I've glad you've found it and are making progress.

It's really just something else to consider (and a personal preference). If you are happy with the results you are getting without embedding the gallery in a custom web page, then that's absolutely great and, as you suggest, being able to use the 'index.html' file directly from JuiceboxBuilder (without the need to embed the gallery in a custom web page) will result in fewer steps in your workflow.