Hello all and happy Friday

I’m working on a layer-based image gallery slideshow. It is almost completely stolen from ideas here on talkgraphics, particularly from Acorn, one which he named lucky-theee-dragon (based on a highslide idea from another poster… sorry not to have the name). Unfortunately, I have not been able to locate the thread.

The concept is not complex, but ingenious in developing your own image gallery with a slideshow, using page layers accessed via popups.

I have added a little to the mix, as you can see in the attachment if you’re interested. (If either of these has previously been done here, my apologies.)

layer slideshow.web

1) I wanted a full-page transparency under the lightbox image when it opens. To accomplish this, on each layer I added a placeholder with a simple div:
Code:
<div class="modal-scrim"></div>
You can see the CSS is in the website head html.

2) I wanted to make the lightbox images clickable to advance to the next image, so I copied the link code from the Next arrow:
Code:
popup: open "Image2" close "Image1"
And I wanted to make the transparency clickable to close the lightbox and return to the image gallery. So, I added the link code:
Code:
popup: close
It seems to work well, and it accomplishes what I set out to do.

* I would like to ask if anyone might share their ingenuity to accomplish the last thing I would like:

Ideally, when the lightbox image opens, it should be in the center of the browser window. Scrolling can occur behind, but the image itself should remain fixed.

Unfortunately, Xara attaches a coordinate location to the image which I have not found a way to override. I attempted to use CSS to center it (position: fixed; left: 50%; top: 50%; transform: translate (-50%, -50%)) but the code calculates the position based on the coordinates already assigned to the image, i.e., where it is physically inserted on the page, rather than relative to the window. (In fact, it is sent to the corner.) (I tried other position attributes as well, but all give screwy results.) The location that Xara automatically generates seems impervious.

Would anyone have ideas on how to overcome this?

Many thanks in advance.