<div class="container">
<div class="header">
<h1>Image Gallery</h1>
<p class="subtitle">Click thumbnails to view full size</p>
</div>
<div class="gallery-content">
<div class="main-image-container">
<button class="nav-button prev" onclick="navigateImage(-1)">‹</button>
<img id="mainImage" class="main-image" src="" alt="Gallery Image">
<div class="image-info">
<div class="image-title" id="imageTitle"></div>
<div class="image-description" id="imageDescription"></div>
</div>
<button class="nav-button next" onclick="navigateImage(1)">›</button>
</div>
<div class="counter" id="counter"></div>
<div class="thumbnails-container" id="thumbnailsContainer"></div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
padding: 30px;
text-align: center;
}
h1 {
font-size: 32px;
margin-bottom: 8px;
}
.subtitle {
font-size: 14px;
opacity: 0.9;
}
.gallery-content {
padding: 30px;
}
.main-image-container {
position: relative;
width: 100%;
height: 500px;
background: #f8f9fa;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.main-image {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.3s;
}
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 30px 20px 20px;
transform: translateY(100%);
transition: transform 0.3s;
}
.main-image-container:hover .image-info {
transform: translateY(0);
}
.image-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.image-description {
font-size: 14px;
opacity: 0.9;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #333;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.nav-button:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.nav-button.prev {
left: 20px;
}
.nav-button.next {
right: 20px;
}
.thumbnails-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}
.thumbnail {
position: relative;
height: 120px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
border: 3px solid transparent;
}
.thumbnail:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.thumbnail.active {
border-color: #fa709a;
box-shadow: 0 4px 16px rgba(250, 112, 154, 0.4);
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.thumbnail:hover img {
transform: scale(1.1);
}
.thumbnail-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
padding: 8px;
font-size: 12px;
font-weight: 500;
}
.counter {
text-align: center;
margin-top: 20px;
color: #666;
font-size: 14px;
}
@media (max-width: 768px) {
.main-image-container {
height: 300px;
}
.thumbnails-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.thumbnail {
height: 80px;
}
.nav-button {
width: 40px;
height: 40px;
font-size: 18px;
}
}
const images = [
{
url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
title: 'Mountain Landscape',
description: 'Breathtaking view of snow-capped mountains'
},
{
url: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e',
title: 'Nature Trail',
description: 'Serene forest path through the wilderness'
},
{
url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05',
title: 'Misty Mountains',
description: 'Foggy mountain peaks at sunrise'
},
{
url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
title: 'Forest Path',
description: 'Peaceful walk through autumn woods'
},
{
url: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff',
title: 'Alpine Lake',
description: 'Crystal clear mountain lake reflection'
},
{
url: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e',
title: 'Sunset Vista',
description: 'Golden hour over rolling hills'
},
{
url: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29',
title: 'Coastal Cliffs',
description: 'Dramatic ocean coastline view'
},
{
url: 'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5',
title: 'Mountain Peak',
description: 'Majestic summit at dawn'
}
];
let currentIndex = 0;
function loadImage(index) {
currentIndex = index;
const img = images[index];
const mainImage = document.getElementById('mainImage');
mainImage.style.opacity = '0';
setTimeout(() => {
mainImage.src = `${img.url}?w=1200&q=80`;
document.getElementById('imageTitle').textContent = img.title;
document.getElementById('imageDescription').textContent = img.description;
document.getElementById('counter').textContent = `Image ${index + 1} of ${images.length}`;
mainImage.style.opacity = '1';
}, 150);
updateThumbnails();
}
function navigateImage(direction) {
let newIndex = currentIndex + direction;
if (newIndex < 0) {
newIndex = images.length - 1;
} else if (newIndex >= images.length) {
newIndex = 0;
}
loadImage(newIndex);
}
function updateThumbnails() {
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach((thumb, index) => {
if (index === currentIndex) {
thumb.classList.add('active');
} else {
thumb.classList.remove('active');
}
});
}
function renderThumbnails() {
const container = document.getElementById('thumbnailsContainer');
images.forEach((img, index) => {
const thumbnail = document.createElement('div');
thumbnail.className = 'thumbnail';
thumbnail.onclick = () => loadImage(index);
thumbnail.innerHTML = `
<img src="${img.url}?w=300&q=80" alt="${img.title}">
<div class="thumbnail-overlay">${img.title}</div>
`;
container.appendChild(thumbnail);
});
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
navigateImage(-1);
} else if (e.key === 'ArrowRight') {
navigateImage(1);
}
});
renderThumbnails();
loadImage(0);
No comments yet. Be the first!