Durch die Bildergalerie gefiltertes Layout und vergrößerter Hover ⇐ JavaScript

[Guest]

Nach dem Titel dieses Beitrags scheint mein Problem vielleicht sehr vage zu sein, aber ich konnte mir keine kurze Erklärung für mein Problem einfallen lassen.
Ich erstelle eine WordPress-Website für mein Praktikum und ich wollte ein paar besonders coole Dinge hinzufügen, also habe ich beschlossen, eine coole interaktive Galerie zu erstellen, um Projekte zu präsentieren. Ich habe ein YouTube-Tutorial für die Grundlagen, das Layout, die Drag- und Zoom-Funktionen befolgt, da ich noch nie zuvor Javascript verwendet habe.
Ich habe es geschafft, ein cooles Overlay, einen automatischen Zoom und die Titel hinzuzufügen ich und chatgpt, aber ich habe es nie geschafft, zwei Probleme zu beheben. Der Hover beim Vergrößern und das visuelle Layout der gefilterten Bilder.
Ich weiß, wie ich beide Probleme auf Papier beheben kann:
Für das Filterproblem muss ich das anpassen Wert von totalRows von 15 bis 30, wenn Sie etwas anderes als „Alle“ filtern und die Bilder pro Zeile auf 80 ändern.
Das Hover-Problem wird dadurch verursacht, dass der Draglayer über den Bildern liegt beim Vergrößern, aber Wenn Sie den Z-Index der Drag-Ebene verringern, funktioniert das Ziehen nicht. Auch das Ändern der Drag-Funktionalität, sagen wir mal, die Galerie erzeugt ein wirklich verzögertes Ziehen, weil die Galerie und der Container beim Vergrößern nicht alle Bilder abdecken.
Ich bin wirklich verloren, und das tue ich auch nicht Ich weiß nicht mehr, was ich tun soll, also hoffe ich, dass mir hier jemand helfen kann.
Ich habe das vollständige Projekt in einer ZIP-Datei hinzugefügt, da es zu viel Code zum Kopieren und Einfügen in diesen Beitrag ist.
Vielen Dank im Voraus an alle für eure Hilfe )
Meine Filterfunktion jetzt:

Code: Select all

// 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 meiner Konsole ändert es die Werte, aber es wird nicht visuell im Raster angezeigt.
Mit dem Hover habe ich noch nicht begonnen noch nicht.
Wenn jemand Interesse an der vollständigen Codedatei hat, kann ich sie Ihnen per E-Mail senden
Beim Filtern nach einem der letzten drei Filter Die totalRows ändern sich auf 30 und die imagesPerRow ändern sich auf 80