Ti ho scritto un piccolo esempio che ovviamente può essere migliorato e riadattato in base alle tue esigenze.

codice:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: brown;
        }

        #preview {
            display: none;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            user-select: none;
            align-items: center;
            justify-content: center;
        }

        #preview img {
            width: 95%;
            margin: 20px;
            border: 2px solid white;
        }

        #previewClose {
            color: white;
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }

        @media (max-width: 1000px) {
            #preview {
                height: 100%;
            }
        }
    </style>

</head>

<body>
    <div id="preview">
        <div id="previewClose">X</div>
    </div>
    <section id="gallery">
        <a href="images/001.jpg"><img src="images/001p.jpg" alt="immagine 1" id="img001p"></a>
        <a href="images/002.jpg"><img src="images/002p.jpg" alt="immagine 2" id="img002p"></a>
        <a href="images/003.jpg"><img src="images/003p.jpg" alt="immagine 3" id="img003p"></a>
        <a href="images/004.jpg"><img src="images/004p.jpg" alt="immagine 4" id="img004p"></a>
        <a href="images/005.jpg"><img src="images/005p.jpg" alt="immagine 5" id="img005p"></a>
        <a href="images/006.jpg"><img src="images/006p.jpg" alt="immagine 6" id="img006p"></a>
        <a href="images/007.jpg"><img src="images/007p.jpg" alt="immagine 7" id="img007p"></a>
        <a href="images/008.jpg"><img src="images/008p.jpg" alt="immagine 8" id="img008p"></a>
    </section>

    <script>
        const gallery = document.getElementById('gallery')
        const preview = document.getElementById('preview')
        const previewClose = document.getElementById('previewClose')
        const imgPreview = document.createElement('img')

        gallery.addEventListener('click', (e) => {
            e.preventDefault()
            imgPreview.setAttribute('src', e.target.parentElement.attributes[0].value)
            preview.appendChild(imgPreview)
            preview.style.setProperty('display', 'flex')
        })
        previewClose.addEventListener('click', () => {
            preview.removeChild(imgPreview)
            preview.style.setProperty('display', 'none')
        })
    </script>
</body>

</html>