mm
/
colors
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update site

new-sep-loss
Michael Pilosov 10 months ago
parent
619dad2fe8
commit
96ea02bca9
1 changed files with 20 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      out/index.html

40
out/index.html
View File

@ -1,21 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Image Gallery</title> <title>Image Gallery</title>
<style> <style>
.gallery-img { .gallery-img {
width: 100%; width: 100%;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
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,14 +72,14 @@
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;
img.onerror = function() { this.style.display = 'none'; }; img.onerror = function () { this.style.display = 'none'; };
img.onload = function() { img.onload = function () {
this.classList.add('gallery-img'); this.classList.add('gallery-img');
this.onclick = function() { this.onclick = function () {
openLightbox(this.src, this.src.split('/').pop()); openLightbox(this.src, this.src.split('/').pop());
currentImageIndex = imageArray.indexOf(this); currentImageIndex = imageArray.indexOf(this);
}; };
@ -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';
@ -102,7 +102,7 @@
} }
// Keyboard navigation for lightbox // Keyboard navigation for lightbox
document.onkeydown = function(e) { document.onkeydown = function (e) {
if (document.getElementById('lightbox').style.display === 'flex') { if (document.getElementById('lightbox').style.display === 'flex') {
if (e.key === 'ArrowRight') { if (e.key === 'ArrowRight') {
navigateLightbox(1); // Next image navigateLightbox(1); // Next image
@ -130,10 +130,10 @@
navigateLightbox(direction); navigateLightbox(direction);
} }
} }
window.onload = function() { window.onload = function () {
loadImages(); loadImages();
updateGridLayout(document.getElementById('layoutSlider').value); };
}; </script>
</script>
</body> </body>
</html>
</html>
Write Preview
Loading…
Cancel
Save