Image gallery filtered layout and zoomed-in hover

So by the title of this post my problem might seem very vague, but I couldn’t come up with a short explanation of my problem.

I’m making a wordpress website for my intern ship and I wanted to add some extra cool things, so I decided to make a cool interactive gallery to showcase projects. I followed a youtube tutorial for the basics, the layout, the drag and zoom functionalities because I have never used javascript before.

I managed to add a cool overlay, automatic zoom and the titles with me and chatgpt, but I never managed to fix two issues. The hover when you are zoomed in and the visual layout of the filtered images.

I know how to fix both issues on paper:
For the filter problem I need to adjust the value of totalRows from 15 to 30 when you filter anything but “All” and change the images per row to 80.

For the hover problem it’s caused by the draglayer laying on top of the images when zoomed in, but lowering the z-index of the drag-layer will make the dragging not work. Also changing the drag functionality to let’s say the gallery creates a really laggy drag cause the gallery and container don’t cover all the images when zoomed in.

I’m really lost and I don’t know what to do anymore so I hope someone here can help me.

i added the full project in a zip file cause it’s to much code to copy paste into this post.

Thank everyone in advance for their help :))

My filter function now:
// Filter functionality
function showAllImages() {
images.forEach(image => {
image.style.display = ‘block’; // Make all images visible
});
}

function filterImages(category) {
    if (category === 'Hybrid space' || category === 'Digital space' || category === 'Physical space') {
        totalRows = 30; 
        imagesPerRow = 80; 
    } else {
        totalRows = 15; 
        imagesPerRow = 40;
    }

    images.forEach(image => {
        const imageCategory = image.getAttribute('data-category');
        if (category === 'all' || imageCategory === category) {
            image.style.display = 'block'; // Show image
        } else {
            image.style.display = 'none'; // Hide image
        }
    });

    // Reapply the grid layout after the filter change
    gsap.to(images, {
        scale: 1,
        opacity: 1,
        delay: 0.5,
        duration: 0.5,
        stagger: {
            amount: 1.5,
            grid: [totalRows, imagesPerRow],
            from: "random",
        },
        ease: "power1.out",
    });
}

// Set active class for buttons
function setActiveButton(activeButton) {
    filterAllBtn.classList.remove('active');
    filterPhysicalBtn.classList.remove('active');
    filterHybridBtn.classList.remove('active');
    filterDigitalBtn.classList.remove('active');
    
    activeButton.classList.add('active');
}

filterAllBtn.addEventListener('click', () => {
    showAllImages(); // Show all images
    setActiveButton(filterAllBtn);
});

filterPhysicalBtn.addEventListener('click', () => {
    filterImages('Physical space'); // Show only physical space images
    setActiveButton(filterPhysicalBtn);
});

filterHybridBtn.addEventListener('click', () => {
    filterImages('Hybrid space'); // Show only hybrid space images
    setActiveButton(filterHybridBtn);
});

filterDigitalBtn.addEventListener('click', () => {
    filterImages('Digital space'); // Show only digital space images
    setActiveButton(filterDigitalBtn);
});

// Initialize with all images shown
showAllImages();

In my console it does changes the values, but it doesn’t show visually in the grid.

For the hover I haven’t started yet.

If anyone is interested in the full code file I can email it to you 🙂

When filtering on one of the last three filters the totalRows chages to 30 and the imagesPerRow changes to 80