Enlarge product images to full-screen, Brine, v7.0

Site URL: https://girlwithoutatripod.com/

I would like to be able to enlarge the product photos when clicked on or hovered over to expand the image size to full-screen or at least close to. I use Brine, version 7.0

Would anyone now how to make this possible? It would be incredibly useful for people to be able to see closer detail of what they are considering buying. 

Thanks!

Thank you- I figured out how to turn on the lightbox feature for a larger product image! 🙂

 Is there a way for the background to be white instead of black (see screenshot)? I'm using a 2:3 pic ratio, so for the images that are 1:1, it would look better if the background was white so that it you don't get the unsightly border effect. Thanks!

Thank you so much for the code! It works and looks great on a phone, but still get the black border on the computer and ipad, same as before. 

Thanks!

I want to provide an update that your code DID work! The issue was that the feature Ajax loading was enabled, which prevented the update from reloading when navigating between pages. 

Thanks again for your help and quick response!

@HelenC

I forgot how to enable lightbox Brine template, do you mind to guide me again, XD