Yes. Your current site links directly to full-browser gallery pages with a 'Home' button in each gallery to return to your main page.
You could certainly replicate this setup with Juicebox. You could link directly to full-browser Juicebox gallery pages and Juicebox-Pro features a Back Button which you can configure to link to whatever web page you like.
Check out the Pro Full Browser gallery on the Juicebox-Pro Demos page which is a full page gallery which features the Back Button (the icon in the top left of the gallery).
You can configure the Back Button using the available Back Button options (for example you can use the 'home' icon or custom text).

Alternatively, you can embed Juicebox galleries within existing web pages (alongside other content) by following the embedding instructions here.

Juicebox galleries can be viewed in any modern browser (Edge, Chrome, Firefox, IE8+, Opera, Safari).
Please see the System Requirements for more details (and check out the demo galleries in your browsers).

There is a Lightroom plugin available to allow you to create Juicebox galleries with Lightroom.
The Lightroom plugin comes bundled within the Juicebox-Lite and Juicebox-Pro zip packages.
Instructions for installing and using the Lightroom plugin can be found on the plugin's support page here.

You can download Juicebox-Lite (and then try out the Juicebox-Lite Lightroom plugin) from the Download Page. (Please note that the Back Button is not available in Juicebox-Lite and is a feature of Juicebox-Pro only.)
You can also build galleries using JuiceboxBuilder (the standalone desktop application we provide), if you like.

I hope this helps to clarify things for you.
If you have any further queries, please let me know and I'll do my best to answer them for you.

Your embedding code looks like it should work fine as long as the following points are followed:

(1) Make sure that you load the 'juicebox.js' file from one of your galleries into your web page (before the embedding code).
For example:

<script src="netting1/jbcore/juicebox.js"></script>

(2) The baseUrl paths are relative (to the web page containing the embedding code) so make sure that you have uploaded your 'netting1' and 'netting2' gallery folders (the complete folders, not just the contents) to the directory that contains the gallery's embedding page.

I hope these notes help.
However, if you continue to experience difficulties, please post back with the URL to your web page so that I can take a look at the problem for myself.
Once I'm able to see the problem live on your web server, I should hopefully be able to determine the cause of the problem and propose a solution.
Thank you.

When setting enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section), the unique links to individual images within a gallery are the gallery's URL with a # at the end, followed by a number (representing the image's position in the gallery).

For example, the direct link to the 7th image in a gallery might look something like this:
http://www.example.com/gallery/index.html#7

If you want to create a bulk list of direct links, you could copy and paste the gallery's URL into a plain text editor (as many times as there are images in your gallery) and just add #1, #2, #3, etc. to the end of the URLs.

Otherwise, you would write a script (in a programming language that you are familiar with) to do this for you.

Here is a quick example using JavaScript.
Just create a new HTML file from the code below (copy and paste it into a plain text editor and save the file with an .html file extension, e.g. "script.html") and open the file in a web browser.
Now enter your gallery's URL and the total number of images in your gallery into the input boxes and click the 'Submit' button.
A list of direct link URLs will be output to the browser window and you can then copy and paste the entire list to wherever you like.

The code is basic but functional. (It works fine but, for example, it does not catch user errors such as a non-numeric entry for the 'Image Total'.)

I hope this helps or at least points you in the right direction.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Direct Link Generator Script</title>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        function display() {
            var url = document.getElementById('url').value;
            var total = document.getElementById('total').value;
            for (var i = 1; i <= total; i++) {
                document.write(url + '#' + i + '<br />');
            }
            document.close();
        }
    </script>
    <form onsubmit="display(); return false;">
        <span>Gallery URL: </span><input type="text" id="url" size="50" value="http://www.example.com/gallery/index.html" /><br />
        <span>Image Total: </span><input type="text" id="total" value="50" /><br />
        <input type="submit" value="Submit">
    </form>
</body>
</html>

You're welcome!
I'm glad it's working now. Thank you for letting me know.

The icons within a Juicebox gallery are characters in a custom font and the font files are stored in the 'jbcore/classic/fonts/' folder.
However, looking at the 'fonts' folder in your own gallery's 'jbcore' folder, it looks like only the 'juicebox.eot' file is present and the SVG, TTF and WOFF files are missing.
Try reuploading the 'jbcore' folder to your web server and, afterwards, make sure that there are four files inside the 'fonts' folder.
(You might also need to clear your browser's cache before reloading your gallery's web page.)
I hope this helps.

First of all, when embedding multiple galleries into a single web page, there are a couple of things to note:

(1) The 'juicebox.js' file should be loaded only once per web page (from within one of your gallery folders), rather than once per gallery.

(2) Each gallery should be embedded into a container with a unique name. At the moment, all of your galleries are embedded into containers with a 'containerId' and <div> 'id' of "juicebox-container". There should be no duplicate 'is' on a web page.

The cause of your problem is likely to be #2 above.
It is possible that when the second tab on your page is selected (for example), the corresponding gallery is embedded into the first <div id="juicebox-container"> that the browser finds on the page (which is in the first tab and is now hidden from view).
Hopefully embedding your galleries into containers with unique names will help.

Another possible cause for your problem is that all your galleries are loaded as soon as your web page is loaded but, when the web page is loaded, only the first tab is visible and has dimensions. The other tabs are initially hidden and essentially have zero dimensions. The galleries on the other tabs have galleryWidth and galleryHeight of 100% so, when the web page is loaded, Juicebox calculates their dimensions to be 100 % of zero (which is zero, resulting in a non-visible gallery).

Here are a couple of things to try.

(1) Give your galleries fixed pixel dimensions rather than percentage dimensions (at least for testing purposes), to see if this helps.

(2) Alternatively, if you want to keep the gallery dimensions at 100% (for the galleries to be responsive), then you'll need to load them only after the selected tab is visible and has been given dimensions on your web page.
Put the gallery embedding code into a JavaScript function (with parameters for the baseUrl and containerId) and load the function (to load a specific gallery into the correct container) when a tab is selected.
For example, you could use something like the following (outside the tabs on your web page, perhaps in the <head> section):

<script src="aluminium/jbcore/juicebox.js"></script>
<script>
function loadGallery(base, container) {
    new juicebox({
        baseUrl : base,
        containerId: container,
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(34,34,34,0)"
    });
}
</script>

Now, inside the first tab (where you currently have each gallery's embedding code), use something like:

<div id="juicebox-container-1"></div>
<script>
    loadGallery('aluminium/', 'juicebox-container-1');
</script>

... and inside the second tab, use something like:

<div id="juicebox-container-2"></div>
<script>
    loadGallery('glass/', 'juicebox-container-2');
</script>

... etc.

(You can insert each gallery's SEO content code inside the corresponding <div> containers. I just left this out in my sample code above for clarity.)

I hope this helps and points you in the right direction.

With Juicebox-Pro, you can change the way that Juicebox preloads images via the imagePreloading configuration option.

Possible values are:

• PAGE - Preloads all images in the current thumbnail page. Unloads all images in the previous thumbnail page.

• NEXT - Preloads image after currently viewed image. Unloads previously viewed images.

• ALL - Preloads all images in gallery. Maximum usability. Images never unloaded. Not good for large galleries (image count > 50).

These values are noted in the Main Image section of the Config Options page.

This configuration option can be changed only in Juicebox-Pro (but not in Juicebox-Lite, the free version, where the default value of PAGE is always used).

If you just want to use the filename for the image title (and have no image caption), then, in the original code, change:

echo '<title></title>';
echo '<caption></caption>';

... to:

echo '<title><![CDATA[' . pathinfo($gallery[$i], PATHINFO_FILENAME) . ']]></title>';
echo '<caption></caption>';

Here's the complete code:

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
$gallery=array_reverse($gallery);
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery useFlickr="false" maxThumbColumns="7" captionPosition="BELOW_IMAGE" buttonBarPosition="OVERLAY_IMAGE" galleryTitlePosition="NONE" backgroundColor="rgba(18,18,18,1)" topBackColor="rgba(0,0,0,0.5)" thumbFrameColor="rgba(204,204,204,1)" thumbHoverFrameWidth="3" thumbSelectedFrameWidth="5" topAreaHeight="5" stagePadding="10" showOpenButton="true" showExpandButton="false" showThumbsButton="true" showImageOverlay="ALWAYS" showOverlayOnLoad="true" showImageNumber="false" maxCaptionHeight="50" captionHAlign="CENTER" showSplashPage="NEVER" showInfoButton="false" screenMode="LARGE" showSmallPagingText="false" showSmallThumbsButton="false" showSmallThumbsOnLoad="false" backButtonUseIcon="true" showImageNav="ALWAYS" captionBackColor="rgba(0,0,0,0.4)" useLargeImages="false" resizeOnImport="true" maxImageWidth="2048" maxImageHeight="1536" showNavButtons="false" flickrShowTitle="false" showAutoPlayButton="false" useFullscreenExpand="false" useThumbDots="false" expandInNewPage="TRUE" showThumbsOnLoad="true" galleryTitle="The Neighbourhood Gallery" enableDirectLinks="false" imageNavPosition="IMAGE" thumbNavPosition="CENTER" buttonBarHAlign="RIGHT">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    echo '<title><![CDATA[' . pathinfo($gallery[$i], PATHINFO_FILENAME) . ']]></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

You're welcome.
I'm glad that everything seems to have sorted itself out. Thank you for letting me know.
It sounds very much like some server caching was going on.

I have an account with a web host that uses Varnish server caching. It can be very useful but it can also be a hindrance when developing a web site as it means that after I upload a new version of a file to my web server, the new version is not seen (and the old version is still served) for about 20 minutes afterwards. For this reason, I have Varnish disabled.

(1) As you are using a PHP file to dynamically generate the gallery's XML content (configUrl : 'config.php',) Juicebox does not use your 'config.xml' file at all.
If you want the configuration options from your 'config.xml' file to be used in your gallery, you'l need to copy them across into your 'config.php' file (as attributes to the opening <juiceboxgallery> tag).

(2) The PHP script will read the directory and display the images in alphabetical order.
If you would like to reverse this order, use PHP's array_reverse function on the array of images before the loop which outputs the <image> tags.
You can manipulate the array using other functions (built-in PHP functions or custom functions) to sort the images in any order you like.

Try something like the following (which incorporates both of my suggestions above):

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
$gallery=array_reverse($gallery);
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery useFlickr="false" maxThumbColumns="7" captionPosition="BELOW_IMAGE" buttonBarPosition="OVERLAY_IMAGE" galleryTitlePosition="NONE" backgroundColor="rgba(18,18,18,1)" topBackColor="rgba(0,0,0,0.5)" thumbFrameColor="rgba(204,204,204,1)" thumbHoverFrameWidth="3" thumbSelectedFrameWidth="5" topAreaHeight="5" stagePadding="10" showOpenButton="true" showExpandButton="false" showThumbsButton="true" showImageOverlay="ALWAYS" showOverlayOnLoad="true" showImageNumber="false" maxCaptionHeight="50" captionHAlign="CENTER" showSplashPage="NEVER" showInfoButton="false" screenMode="LARGE" showSmallPagingText="false" showSmallThumbsButton="false" showSmallThumbsOnLoad="false" backButtonUseIcon="true" showImageNav="ALWAYS" captionBackColor="rgba(0,0,0,0.4)" useLargeImages="false" resizeOnImport="true" maxImageWidth="2048" maxImageHeight="1536" showNavButtons="false" flickrShowTitle="false" showAutoPlayButton="false" useFullscreenExpand="false" useThumbDots="false" expandInNewPage="TRUE" showThumbsOnLoad="true" galleryTitle="The Neighbourhood Gallery" enableDirectLinks="false" imageNavPosition="IMAGE" thumbNavPosition="CENTER" buttonBarHAlign="RIGHT">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    echo '<title></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

That's great! Thank you for letting me know.
I'm glad the fix was an easy one!

Unfortunately, it looks like Juicebox would not be a suitable candidate for an AMP page.

According to this AMP support page:

Also, the AMP specifications page notes that the <script> tag is:

This means that you would not be able to load the required Juicebox 'javascript.js' file in an AMP page.