define a variable like a path for dinamic gallery

I’m doing a simple website, in my website I have two pages, INDEX and IMAGES.
INDEX have a iframe that load IMAGES, I’m using codes that I found online by the way.

In IMAGES I have a some links like this:

<img
  class="gg-box, other-css-clas"
  src="/IMGS/THUMBNAILS/29.webp"
  alt="Image 29"
  loading="lazy"
  data-title="Image 29"
  data-author="Autor 29"
  data-link="#"
  data-img-fullres="IMGS/FULL-RES/29.jpg"
>

IMAGES have a javascript that send data to INDEX javascript to load a modal css.

<script>
    // Selects all images inside the gg-box class
    const images = document.querySelectorAll(".gg-box img");

    // For each image, add a click event listener
    images.forEach((image, index) => {
        image.addEventListener("click", function() {
            // Get the src attribute (URL) and data attributes of the clicked image
            const imageSrc = image.src;
            const title = image.getAttribute("data-title") || "X . X"; 
            const author = image.getAttribute("data-author") || "X . X";
            const link = image.getAttribute("data-link") || "#"; 

            // Sends a message to the parent (INDEX) with image details
            parent.postMessage({
                type: "openImage",
                src: imageSrc,
                index: index,
                images: Array.from(images).map(img => ({
                    src: img.src,
                    title: img.getAttribute("data-title") || "X . X",
                    author: img.getAttribute("data-author") || "X . X",
                    link: img.getAttribute("data-link") || "#"  
                }))
            }, "*");
        });
    });
</script>

In INDEX I have a simple css modal with a img tag in the middle:

<img
   id="modal-image"
   src=""
   alt="comment"
   onclick="event.stopPropagation()"
>

This is the parent code in INDEX:

// DOM Element Declarations

const ggScreen = document.getElementById('gg-screen');
const modalImage = document.getElementById('modal-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const closeBtn = document.getElementById('close-btn');
const downloadBtn = document.getElementById('download-full-res-btn'); // Download button

// Variables for Image Control

let images = [];
let currentImgIndex = -1;

function openImageModal(imageSrc) {
    modalImage.src = imageSrc;
    ggScreen.style.display = 'flex';

    // Make the image focusable
    modalImage.setAttribute("tabindex", "0");
    modalImage.focus();

    const currentImage = images[currentImgIndex];

    if (currentImage) {
        // Fill in the title, author, and link information
        const title = currentImage.title || "X . X";
        const author = currentImage.author || "X . X";
        const link = currentImage.link || "#";

        document.getElementById('data-text-title').textContent = title;
        document.getElementById('data-text-author').textContent = author;
        document.getElementById('data-text-link').innerHTML = `<a href="${link}" target="_blank">Open link</a>`;

        // Set up the download button with the image URL
        const fullResImage = currentImage.fullRes || imageSrc;
        configureDownloadButton(fullResImage);
    }
}

// Function to configure the download button

function configureDownloadButton(imageSrc) {
    const fileName = imageSrc.split('/').pop(); // Extract the file name from the URL
    const fullResUrl = `/IMGS/FULL-RES/${fileName}`; // Complete URL for download

    // Set the download URL attribute on the modal image
    modalImage.setAttribute('data-img-fullres', fullResUrl);

    // Update the download button with the URL and file name
    downloadBtn.setAttribute('href', fullResUrl);
    downloadBtn.setAttribute('download', fileName);
}
// Image download handler
function handleDownloadClick(event) {
    event.stopPropagation(); // Prevent the modal from closing when the download button is clicked

    const imageUrl = modalImage.getAttribute('data-img-fullres');
    const fileName = imageUrl.split('/').pop();

    if (imageUrl) {
        console.log("Download button clicked! The download URL is: " + imageUrl);

        // Create a temporary link for downloading
        const a = document.createElement('a');
        a.href = imageUrl;
        a.download = fileName;

        // Trigger the click for automatic download
        document.body.appendChild(a);
        a.click();

        // Remove the temporary link after the click
        document.body.removeChild(a);
    } else {
        console.log("Error: Could not find the download URL.");
    }
}
// Call the initialization function

init();

The code is working, but not properly.

Information like data-title, data-author and data-link works fine, but data-fullres don’t, what I need is set the id="modal-image" to receive the data-img-fullres="IMGS/FULL-RES/29.jpg" from IMAGES.

Right now I don’t find a way to properly assing the data-img-fullres to the src of id="modal-image", the default behavior is open the THUMBNAIL, in some tries I got a undefined error from the browser.

How can I properly address the data-img-fullres?