Sfoglia-copertine· html
<!doctype html>
a.appendChild(im);
a.addEventListener(‘click’, () => showIndex(idx));
frag.appendChild(a);
});
thumbsGrid.appendChild(frag);
}
functionupdateActiveThumb(){
constall = thumbsGrid.querySelectorAll(‘.thumb’);
all.forEach(t => t.classList.remove(‘active’));
constactive = thumbsGrid.querySelector(`.thumb[data-index=”${current}”]`);
if(active){ active.classList.add(‘active’); active.scrollIntoView({behavior:’smooth’,block:’nearest’,inline:’nearest’}); }
}
functionshowIndex(i){
current = (i + images.length) % images.length;
constinfo = images[current];
// usa una versione più grande
mainImage.src = info.src;
mainImage.alt = `${info.title} — ${info.author}`;
titleText.textContent = info.title;
subtitleText.textContent = info.author;
indexEl.textContent = info.id;
totalEl.textContent = images.length;
downloadLink.href = info.src;
updateActiveThumb();
}
functionnext(){ showIndex(current + 1); }
functionprev(){ showIndex(current – 1); }
prevBtn.addEventListener(‘click’, prev);
nextBtn.addEventListener(‘click’, next);
// keyboard navigation
document.addEventListener(‘keydown’, (e) => {
if(e.key === ‘ArrowRight’) next();
if(e.key === ‘ArrowLeft’) prev();
if(e.key === ‘ ‘) { e.preventDefault(); togglePlay(); }
});
functiontogglePlay(){
if(autoplay){ clearInterval(autoplay); autoplay = null; playBtn.textContent = ‘Play’; playBtn.setAttribute(‘aria-pressed’,’false’); }
else { autoplay = setInterval(next, 1800); playBtn.textContent = ‘Pause’; playBtn.setAttribute(‘aria-pressed’,’true’); }
}
playBtn.addEventListener(‘click’, togglePlay);
// inizializza
renderThumbnails();
showIndex(0);
// accessibilità: focus first thumb on load
window.addEventListener(‘load’, () => {
constfirst = thumbsGrid.querySelector(‘.thumb’);
if(first) first.tabIndex = 0;
});
</script>
</body>
</html>