|
|
@ -1,5 +1,6 @@ |
|
|
<!DOCTYPE html> |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<html> |
|
|
|
|
|
|
|
|
<head> |
|
|
<head> |
|
|
<title>Image Gallery</title> |
|
|
<title>Image Gallery</title> |
|
|
<style> |
|
|
<style> |
|
|
@ -10,12 +11,16 @@ |
|
|
border-radius: 8px; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#gallery { |
|
|
#gallery { |
|
|
display: grid; |
|
|
display: grid; |
|
|
|
|
|
grid-template-columns: repeat(10, 1fr); |
|
|
|
|
|
/* 10 equal columns */ |
|
|
grid-gap: 10px; |
|
|
grid-gap: 10px; |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#lightbox { |
|
|
#lightbox { |
|
|
display: none; |
|
|
display: none; |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
@ -28,10 +33,12 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
z-index: 1000; |
|
|
z-index: 1000; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#lightbox img { |
|
|
#lightbox img { |
|
|
max-width: 80%; |
|
|
max-width: 80%; |
|
|
max-height: 80%; |
|
|
max-height: 80%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#lightbox #caption { |
|
|
#lightbox #caption { |
|
|
color: white; |
|
|
color: white; |
|
|
margin-top: 20px; |
|
|
margin-top: 20px; |
|
|
@ -43,12 +50,12 @@ |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
</head> |
|
|
</head> |
|
|
|
|
|
|
|
|
<body> |
|
|
<body> |
|
|
<header> |
|
|
<header> |
|
|
<h1>Image Gallery</h1> |
|
|
<h1>Image Gallery</h1> |
|
|
</header> |
|
|
</header> |
|
|
<main> |
|
|
<main> |
|
|
<input type="range" id="layoutSlider" min="1" max="20" value="10" width="100%"> |
|
|
|
|
|
<div id="gallery"></div> |
|
|
<div id="gallery"></div> |
|
|
</main> |
|
|
</main> |
|
|
|
|
|
|
|
|
@ -65,7 +72,7 @@ |
|
|
function loadImages() { |
|
|
function loadImages() { |
|
|
var gallery = document.getElementById('gallery'); |
|
|
var gallery = document.getElementById('gallery'); |
|
|
|
|
|
|
|
|
for (var i = 0; i <= 199; i++) { |
|
|
for (var i = 175; i < 275; i++) { // Changed from i <= 100 to i < 100 |
|
|
let imageName = 'v' + i + '.png'; |
|
|
let imageName = 'v' + i + '.png'; |
|
|
let img = document.createElement('img'); |
|
|
let img = document.createElement('img'); |
|
|
img.src = imageName; |
|
|
img.src = imageName; |
|
|
@ -82,14 +89,7 @@ |
|
|
gallery.appendChild(img); |
|
|
gallery.appendChild(img); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
function updateGridLayout(columns) { |
|
|
|
|
|
var gallery = document.getElementById('gallery'); |
|
|
|
|
|
gallery.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('layoutSlider').addEventListener('input', function() { |
|
|
|
|
|
updateGridLayout(this.value); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
function openLightbox(src, filename) { |
|
|
function openLightbox(src, filename) { |
|
|
document.getElementById('lightbox').style.display = 'flex'; |
|
|
document.getElementById('lightbox').style.display = 'flex'; |
|
|
@ -132,8 +132,8 @@ |
|
|
} |
|
|
} |
|
|
window.onload = function () { |
|
|
window.onload = function () { |
|
|
loadImages(); |
|
|
loadImages(); |
|
|
updateGridLayout(document.getElementById('layoutSlider').value); |
|
|
|
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
</body> |
|
|
</body> |
|
|
|
|
|
|
|
|
</html> |
|
|
</html> |
Michael Pilosov
10 months ago