`;
kubioGrid.appendChild(thumbnail);
});
// Aggiungere eventi click
document.querySelectorAll('.kubio-thumbnail').forEach(thumbnail => {
thumbnail.addEventListener('click', function(e) {
if (e.target.classList.contains('kubio-close-btn') ||
e.target.classList.contains('kubio-nav-btn')) {
return;
}
kubioExpandThumbnail(parseInt(this.dataset.index));
});
});
}
// Espandere miniatura
function kubioExpandThumbnail(index) {
const thumbnails = document.querySelectorAll('.kubio-thumbnail');
kubioCurrentIndex = index;
// Chiudere tutte prima
thumbnails.forEach(thumb => {
thumb.classList.remove('expanded');
thumb.querySelector('.kubio-close-btn').style.display = 'none';
thumb.querySelector('.kubio-prev-btn').style.display = 'none';
thumb.querySelector('.kubio-next-btn').style.display = 'none';
thumb.querySelector('.kubio-image-counter').style.display = 'none';
});
// Espandere quella cliccata
const expandedThumb = thumbnails[index];
expandedThumb.classList.add('expanded');
// Mostrare controlli
expandedThumb.querySelector('.kubio-close-btn').style.display = 'flex';
expandedThumb.querySelector('.kubio-prev-btn').style.display = 'flex';
expandedThumb.querySelector('.kubio-next-btn').style.display = 'flex';
expandedThumb.querySelector('.kubio-image-counter').style.display = 'block';
// Aggiornare contatore
kubioUpdateImageCounter(expandedThumb);
// Mostrare overlay
kubioOverlay.classList.add('active');
// Configurare pulsanti
const closeBtn = expandedThumb.querySelector('.kubio-close-btn');
const prevBtn = expandedThumb.querySelector('.kubio-prev-btn');
const nextBtn = expandedThumb.querySelector('.kubio-next-btn');
closeBtn.onclick = (e) => {
e.stopPropagation();
kubioCollapseThumbnail();
};
prevBtn.onclick = (e) => {
e.stopPropagation();
kubioNavigateImage(-1);
};
nextBtn.onclick = (e) => {
e.stopPropagation();
kubioNavigateImage(1);
};
}
// Chiudere miniatura
function kubioCollapseThumbnail() {
const expandedThumb = document.querySelector('.kubio-thumbnail.expanded');
if (expandedThumb) {
expandedThumb.classList.remove('expanded');
kubioOverlay.classList.remove('active');
}
}
// Navigare tra immagini - SENZA ANIMAZIONE
function kubioNavigateImage(direction) {
let newIndex = kubioCurrentIndex + direction;
if (newIndex = kubioGalleryImages.length) newIndex = 0;
const currentExpanded = document.querySelector('.kubio-thumbnail.expanded');
if (currentExpanded) {
currentExpanded.classList.remove('expanded');
}
// Cambio immediato senza animazione
kubioExpandThumbnail(newIndex);
}
// Aggiornare contatore
function kubioUpdateImageCounter(thumbnail) {
const counter = thumbnail.querySelector('.kubio-image-counter');
counter.textContent = `${kubioCurrentIndex + 1} / ${kubioGalleryImages.length}`;
}
// Configurare eventi
function setupKubioEventListeners() {
// Tastiera
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
kubioCollapseThumbnail();
}
if (document.querySelector('.kubio-thumbnail.expanded')) {
if (e.key === 'ArrowLeft') {
kubioNavigateImage(-1);
} else if (e.key === 'ArrowRight') {
kubioNavigateImage(1);
}
}
});
// Overlay
kubioOverlay.addEventListener('click', () => {
kubioCollapseThumbnail();
});
}
// Iniziare quando la pagina carica
document.addEventListener('DOMContentLoaded', kubioInitGallery);
