For this to work, you need v16+ of a Xara Desktop application (XDA): XWD(P) or XDPX or XPro+, where Image Filename is an option.
A shape on your page requires the special Name UsesJQuery or you have added in a Web Animation effect already: either includes the jQuery library.

Create an images layer (I used !Photo, but that is my preference as it forces the layer to publish regardless).
Add and lock a shape on that layer that calls the same layer: this hides everything.

Why?
Add any number of hires images into the !Images layer and give them all an Image Filename of "photo".

On the MouseOff layer, create a large rectangle as a Placeholder for the gallery.
Add the HTML code (body) of:
Code:
<ul class="thumb">
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo@2x.jpg)"></div></a></li>


  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo1@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo2@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo3@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo4@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo5@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo6@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo7@2x.jpg)"></div></a></li>
  <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo8@2x.jpg)"></div></a></li>
   [Keep adding lines of <li>...</li>, incrementing the photo number (See *** below) each time]
</ul>	


<div class="thumbnail-zoomed-wrapper" style="display: block;">
  <div class="thumbnail-zoomed-image"><img src="" alt=""></div>
</div>
Size this box, using 170px across and 130px down for each image.

Make sure you copy across the CSS (Page > HTML Code (head)) and JavaScript (Page > HTML Code (body)) from my example file.
You can make the box narrow and taller and the mosaic will follow. You can readily make it fit into your Variant pages as shown in the example file.

If you have collections of images and want different galleries, create a new !Layer for each collection and in the Placeholder and Image Filename change the name to that of the layer.

You should now have a display with a set of 160x120px thumbnails in a cosy grid.
When you rollover any, you get a hover that presents the image in its full dimensioned ratio. I have added a slight transparency for my personal preference.
A further click of this open the image to 75% of your browser width.
This is mainly designed for landscape but portrait will still work.
I have include one example portrait image.

JS - Mosaic Gallery.xar

i have had to optimise the images to upload into TG.
The reworked original code came from https://www.freakyjolly.com/image-th.../#.X5REySiYUuU.

Acorn

P.S. *** The photoN@2x.jpg naming is to access the Retina images. If you have Retina off, use photoN.jpg instead.