Макет галереи изображений с фильтром и увеличенным наведением ⇐ Javascript

[Anonymous]

По названию этого поста моя проблема может показаться очень расплывчатой, но я не смог дать краткого объяснения своей проблемы.
Я создаю веб-сайт WordPress для моей стажировки, и мне хотелось добавить еще несколько интересных вещей, поэтому я решил создать классную интерактивную галерею для демонстрации проектов. Я ознакомился с основами, макетом, функциями перетаскивания и масштабирования на YouTube, поскольку никогда раньше не использовал JavaScript.
Мне удалось добавить классное наложение, автоматическое масштабирование и заголовки с помощью я и чатгпт, но мне так и не удалось решить две проблемы. Наведение при увеличении и визуальное расположение отфильтрованных изображений.
Я знаю, как исправить обе проблемы на бумаге:
Для проблемы с фильтром мне нужно настроить значение totalRows от 15 до 30, когда вы фильтруете что-либо, кроме «Все», и меняете количество изображений в строке на 80.
Проблема с наведением вызвана тем, что слой перетаскивания лежит поверх изображений. при увеличении, но уменьшение z-индекса слоя перетаскивания приведет к тому, что перетаскивание не будет работать. Также измените функцию перетаскивания, скажем, в галерее перетаскивание происходит очень медленно, потому что галерея и контейнер не охватывают все изображения при увеличении.
Я действительно растерялся и не знаю. больше не знаю, что делать, поэтому надеюсь, что кто-нибудь здесь сможет мне помочь.
Я добавил полный проект в zip-файл, потому что для его копирования и вставки в этот пост слишком много кода.
p>
Заранее всем спасибо за помощь )
Моя функция фильтра сейчас:
// Функциональность фильтра
function showAllImages() {
images.forEach(image => {
image.style.display = 'block'; // Делаем все изображения видимыми
});

Код: Выделить всё

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();

В моей консоли он меняет значения, но визуально не отображается в сетке.
Для наведения я не запускал пока.
Если кого-то интересует полный файл кода, я могу отправить его вам по электронной почте
При фильтрации по одному из трех последних фильтров totalRows изменится на 30, а imagesPerRow изменится на 80

Подробнее здесь: https://stackoverflow.com/questions/793 ... d-in-hover