Collection multi reference fields - display image in modal window

I’m building a shopfront and have variants including images for some of my products. The variants are held in a collection (Beauty Variants) which is accessed as a multi reference field in my main products collection (Beauty Products). I want to be able to show larger versions of the variant images so have created a popup modal to show a larger version of the image on clicking the small image. The modal pops up OK, but the image shown is always the last one in the multi-ref field rather than the one I’ve clicked on and I can’t work out how I might make this work.

Also the close modal button isn’t working on the published site although it works in Preview mode.

My read-only link is below. A typical page showing the incorrect behaviour is: 2.

If anyone has any ideas, I’d be very grateful!