The main problem of Xara's implementation of the HighSlide widget is it take the Shape that has Web Properties > Image > Photo pop-up applied and pop-ups the exact same Shape at a higher scaling.

I have overcome this by placing the pop-up control images into a !Thumbs layer.
They are hidden from design view to avoid clutter. When any shape in the layer calls the same layer as a pop-up then these images & shapes will always be published.

Each !Thumbs' image is then set Web Properties > Image > Photo pop-up as normal.
The only trick is each is then given a Name (Id). I chose tnn where nn can be any two-digit number, just make each different.
The 'thumbs' can be as small as you like. Set them out in a grid (10x10 'thumbs' would work), giving an easy way to recover the Name (Id).

On your design page, any shape, line, button, image or fragment can be linked to this Name.
The Link is javascript: void $('#tnn').parent().click();
This acts as if you had clicked the hidden 'thumbs' image.

In the Page Head and Body are CSS and JavaScript that alter the Xara defaults for HighSlide.
You do not need these but it affords an additional layer of control over how your wish to design to present.

In Xara Plus applications, Xara introduced the preload method that affects how the hs variable can be manipulated.
Essentially, I needed to add a further window.addEventListener('load', ) statement to ensure HighSlide was loaded before accessing and changing the hs variable.
I have not checked with IE (as MS now forces Edge) where there might be a conflict. XDPDv12 runs IE internally but the HighSlide CSS settings are not recognised.
As far as I can see, this design works properly in all modern browsers.

JS - Highslide Copyrighting.xar

I only added a simple watermark to the lions' image.
This approach also works with Variants. You need to ensure the !Thumbs layer in the variant is empty.

Acorn