Adding A Link To An Image Gallery Using Custom Liquid

[Stanced21]

I am trying to add a link to each image on the "Members" page of my website. I want to add an Instagram Link to each of their images. I created that gallery using the "custom liquid" in the "Add Section" menu while customizing the website. This is the following code I used:

https://lucidpolygon.com/blog/how-to-add-an-image-gallery-to-shopify-page-blog

<style>
        .lp-img-gallery {
            width: 80%;
            margin: 100px auto 50px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 30px;
        }

        .lp-img-gallery img {
            width: 100%;
            cursor: pointer;
            transition: 1s ease;
        }

        .lp-img-gallery img:hover {
            transform: scale(0.8);
            box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
        }

        /* Wrapper */
        .lp-image-wrapper {
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .lp-image-wrapper img {
            width: 80%;
            max-width: 500px;
        }

        .lp-image-wrapper span {
            position: absolute;
            font-family: sans-serif;
            color: #fff;
            cursor: pointer;
            padding: 5px 8px;
        }

        #lpImgModalClose {
            top: 5%;
            right: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        #lpNextImage {
            top: 45%;
            right: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        #lpPrevImage {
            top: 45%;
            left: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        @media (min-width: 640px) {

            #lpImgModalClose,
            #lpNextImage,
            #lpPrevImage {
                background-color: unset;
                border: unset;
            }
        }
    </style>

    <div class="lp-image-wrapper" id="lpModalWrapper">
        <img src="" id="fullImg" />
        <span id="lpImgModalClose">&#10005; </span>
        <span id="lpNextImage">&#8594;</span>
        <span id="lpPrevImage">&#8592;</span>
    </div>

    <div class="lp-img-gallery" id="lpImgGallery">
        <img src="https://picsum.photos/id/237/800/600" />
        <img src="https://picsum.photos/id/238/800/600" />
        <img src="https://picsum.photos/id/239/800/600" />
        <img src="https://picsum.photos/id/240/800/600" />
        <img src="https://picsum.photos/id/241/400/800" />
        <img src="https://picsum.photos/id/242/800/600" />
        <img src="https://picsum.photos/id/243/800/600" />
        <img src="https://picsum.photos/id/244/800/600" />
    </div>

    <script>
        let images = document.querySelectorAll('#lpImgGallery img');
        let wrapper = document.getElementById("lpModalWrapper");
        let imgWrapper = document.getElementById("fullImg");
        let close = document.getElementById("lpImgModalClose");
        let next = document.getElementById("lpNextImage");
        let prev = document.getElementById("lpPrevImage");
        let indexOfCurrent = null;

        images.forEach((img, index) => {
            img.addEventListener("click", () => {
                indexOfCurrent = index;
                openModal(indexOfCurrent);
            });
        });

        function openModal(index) {
            wrapper.style.display = "flex";
            imgWrapper.src=images[index].getAttribute('src');
            hideArrows();
            document.body.style.overflow = "hidden";
        }

        close.addEventListener("click", () => closeModal());

        function closeModal() {
            wrapper.style.display = "none";
            document.body.style.overflow = "unset";
        }

        next.addEventListener("click", () => {
            if (indexOfCurrent + 1 <= images.length - 1) {
                indexOfCurrent = indexOfCurrent + 1;
                openModal(indexOfCurrent);
            }
        });

        prev.addEventListener("click", () => {
            if (indexOfCurrent - 1 >= 0) {
                indexOfCurrent = indexOfCurrent - 1;
                openModal(indexOfCurrent);
            }
        });

        function hideArrows() {
            prev.style.display = "unset";
            next.style.display = "unset";
            if (indexOfCurrent == images.length - 1) {
                next.style.display = "none";
            }
            if (indexOfCurrent == 0) {
                prev.style.display = "none";
            }
        }

        document.addEventListener("keydown", ({ key }) => {
            if (key === "Escape") {
                closeModal();
            }
            if (key === "ArrowRight") {
                next.click();
            }
            if (key === "ArrowLeft") {
                prev.click();
            }
        });

    </script>