web/galerie/index.html

48 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title> Deez nuts </title>
<link rel="stylesheet" href="../index.css">
</head>
<body> <center>
<div class="box">
<h2>Umění</h2>
<div id="galerie">
<div id="gal0" class="gal"><img class="galimg" id="galimg0"></div>
<div id="gal1" class="gal"><img class="galimg" id="galimg1"></div>
<div id="gal2" class="gal"><img class="galimg" id="galimg2"></div>
<div id="gal3" class="gal"><img class="galimg" id="galimg3"></div>
<div id="gal4" class="gal"><img class="galimg" id="galimg4"></div>
<div id="gal5" class="gal"><img class="galimg" id="galimg5"></div>
</div>
<button class="foot" id="lgal"><p><</p></button>
<p class="foot" id="counter"> </p>
<button class="foot" id="rgal"><p>></p></button>
</div>
<script>
let index = 0;
let imgpaths = ["cabelist.jpg", "computerist.jpg", "culturist.jpg", "drivist.jpg", "forkliftist.jpg", "hamerist.webp", "listenist.jpg", "assist.jpg", "readist.jpg", "readist2.jpg", "pottist.jpg", "ew.jpg", "waterist.jpg", "the_fight.jpg", "tankist.png", "lingebra.jpg", "i_was_put.jpg", "man.jpg", "real.jpg", "freebird.jpg", "Bez_nadeje.png", "amogusepic.jpg", "gchdeez.png", "lays.png", "pie.png", "godot.jpg", "amogus-real.jpg", "big-chungus.png"];
let count = imgpaths.length;
let max = Math.floor(count/6);
let update = () => {
for(let i = 0; i < 6; i++) {
let src = "gandalf.jpg";
if(i + index*6 < count) src = imgpaths[6*index + i];
document.getElementById("galimg"+i).src = "umeni/"+src;
}
document.getElementById("counter").innerHTML = index + ' / ' + max;
}
document.getElementById("lgal").onclick = () => {
if(index <= 0 ) index = max;
else index--;
update();
}
document.getElementById("rgal").onclick = () => {
if(index >= max) index = 0;
else index++;
update();
}
update();
</script>
</center> </body>
</html>