UPDATE
In considering Variants, I have changed the filename of the former Content.txt to metadata.txt.
At the same time, metadata.txt is now just a big JavaScript variable with gallery & content data.
The nanogalleries are called from within the design for Main and Variant(s) as each gallery needs to run with a separate ID, even through they can use the same data, that metadata.txt is providing (here).

Website Head:
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>
Page Body:
<script src="index_htm_files/metadata.txt"></script>


<script>
$('#main').nanogallery2(metadata);
$('#variant').nanogallery2(metadata);
</script>
Main Placeholder:
<div id="main" data-nanogallery2 width=100% height=100%></div>
Variant Placeholder:
<div id="variant" data-nanogallery2 width=100% height=100%></div>

Don't forget UsesJQuery.

I have expanded the features of the lightbox so you now have Title & Description on hover as well as the ability to Share, Download and see the fuller Label information as a pop-up.

The new demonstrator is here: nano2.zip.
I should also mention that you really do need separate Thumbnails as using the main images as pseudo-thumbs destroys and smart lazy loading.

Acorn