✖ ❮ ❯

body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px; } .grid-container img { width: 300px; height: 200px; cursor: pointer; border-radius: 5px; transition: transform 0.2s ease; } .grid-container img:hover { transform: scale(1.05); } .fullscreen-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; } .fullscreen-container img { max-width: 90%; max-height: 90%; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } .close-icon, .nav-icon { position: absolute; color: white; font-size: 30px; cursor: pointer; user-select: none; } .close-icon { top: 10px; right: 20px; } .nav-icon { top: 50%; transform: translateY(-50%); } .nav-icon.prev { left: 20px; } .nav-icon.next { right: 20px; } const images = document.querySelectorAll(‘.grid-container img’); const fullscreenContainer = document.querySelector(‘.fullscreen-container’); const fullscreenImage = fullscreenContainer.querySelector(‘img’); const closeIcon = fullscreenContainer.querySelector(‘.close-icon’); const prevIcon = fullscreenContainer.querySelector(‘.nav-icon.prev’); const nextIcon = fullscreenContainer.querySelector(‘.nav-icon.next’); let currentIndex = 0; function openFullscreen(index) { currentIndex = index; fullscreenImage.src = images[currentIndex].src; fullscreenContainer.style.display = ‘flex’; } function closeFullscreen() { fullscreenContainer.style.display = ‘none’; } function showNext() { currentIndex = (currentIndex + 1) % images.length; fullscreenImage.src = images[currentIndex].src; } function showPrev() { currentIndex = (currentIndex – 1 + images.length) % images.length; fullscreenImage.src = images[currentIndex].src; } images.forEach((image, index) => { image.addEventListener(‘click’, () => openFullscreen(index)); }); closeIcon.addEventListener(‘click’, closeFullscreen); nextIcon.addEventListener(‘click’, showNext); prevIcon.addEventListener(‘click’, showPrev);