Ciao, questo è un piccolo esempio fatto in css, dovresti adattare parte del tuo codice html ovviamente, inoltre ti consiglio di lavorare sulla compressione delle foto, sono troppo grandi per il web, utilizza programmi come caesium oppure paint.net che sono gratuiti.

codice HTML:
<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .thumbnail {
            width: 320px;
            height: 240px;
        }

        .lightbox {
            /** Default lightbox to hidden */
            display: none;
            /** Position and style */
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100%;
            text-align: center;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);

        }

        .lightbox img {
            /** Pad the lightbox image */
            max-width: 90%;
            max-height: 80%;
            margin-top: 2%;
            cursor: pointer;
            animation-name: zoom;
            animation-duration: 0.5s;
        }

        .lightbox:target {
            /** Remove default browser outline */
            outline: none;
            /** Unhide lightbox **/
            display: block;
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }
            to {
                transform: scale(1)
            }
        }
    </style>
</head>

<body>

    <a href="#P1010002">
        <img class="thumbnail" src="P1010002.JPG">
    </a>
    <a class="lightbox" href="#" id="P1010002">
        <img src="P1010002.JPG">
    </a>

</body>
</html>