Add Css and Js on your child theme . add this class to the image –> zoom-image

Js

document.addEventListener('DOMContentLoaded', function () {

    // Create lightbox
    const lightbox = document.createElement('div');
    lightbox.className = 'custom-image-lightbox';

    lightbox.innerHTML = `
        <button class="custom-lightbox-close" aria-label="Close">&times;</button>
        <img src="" alt="">
    `;

    document.body.appendChild(lightbox);

    const lightboxImage = lightbox.querySelector('img');
    const closeButton = lightbox.querySelector('.custom-lightbox-close');

    let scale = 1;

    // Open image
    document.querySelectorAll('.zoom-image img').forEach(function (image) {

        image.addEventListener('click', function (e) {
            e.preventDefault();

            // Try to use the full-size image if available
            const parentLink = image.closest('a');

            if (parentLink && parentLink.href) {
                lightboxImage.src = parentLink.href;
            } else {
                lightboxImage.src = image.currentSrc || image.src;
            }

            lightboxImage.alt = image.alt || '';

            scale = 1;
            lightboxImage.style.transform = 'scale(1)';
            lightboxImage.classList.remove('zoomed');

            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden';
        });

    });

    // Click image to zoom
    lightboxImage.addEventListener('click', function (e) {
        e.stopPropagation();

        if (scale === 1) {
            scale = 2.5;
            lightboxImage.classList.add('zoomed');
        } else {
            scale = 1;
            lightboxImage.classList.remove('zoomed');
        }

        lightboxImage.style.transform = `scale(${scale})`;
    });

    // Mouse wheel zoom
    lightboxImage.addEventListener('wheel', function (e) {
        e.preventDefault();

        if (e.deltaY < 0) {
            scale += 0.25;
        } else {
            scale -= 0.25;
        }

        scale = Math.min(Math.max(1, scale), 5);

        lightboxImage.style.transform = `scale(${scale})`;

        if (scale > 1) {
            lightboxImage.classList.add('zoomed');
        } else {
            lightboxImage.classList.remove('zoomed');
        }
    }, { passive: false });

    function closeLightbox() {
        lightbox.classList.remove('active');
        document.body.style.overflow = '';

        scale = 1;
        lightboxImage.style.transform = 'scale(1)';
    }

    // Close button
    closeButton.addEventListener('click', closeLightbox);

    // Click background
    lightbox.addEventListener('click', function (e) {
        if (e.target === lightbox) {
            closeLightbox();
        }
    });

    // ESC key
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeLightbox();
        }
    });

});

CSS

/* Image Zoom Lightbox */
.custom-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.custom-image-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.custom-image-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    cursor: zoom-in;
    user-select: none;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.custom-image-lightbox img.zoomed {
    cursor: grab;
}

.custom-image-lightbox img.zoomed:active {
    cursor: grabbing;
}

.custom-lightbox-close {
    position: fixed;
    top: 20px;
    right: 25px;
    z-index: 1000000;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: 0;
}

.zoom-image img {
    cursor: zoom-in;
}