+let slideCount = 0;
+let slideCurrent = 0
+
+function setup () {
+ // setup the slideshows
+ slideshows = document.getElementsByClassName("slideshow");
+ let s = 0;
+ for (slideshow of slideshows) {
+ let i = 0;
+ for (child of slideshow.children) {
+ if (child.tagName == "IMG") {
+ child.style.display = "none";
+ child.id = `show${s}slide${i}`;
+ i++;
+ } else if (child.classList.contains("next")) {
+ var si = s;
+ child.addEventListener("click", (e) => {
+ e.preventDefault();
+ document.getElementById(`show${si}slide${slideCurrent}`)
+ .style.display = "none";
+ slideCurrent ++;
+ if (slideCurrent >= slideCount) {
+ slideCurrent = 0;
+ }
+ document.getElementById(`show${si}slide${slideCurrent}`)
+ .style.display = "block";
+ });
+ } else {
+ var si = s;
+ child.addEventListener("click", (e) => {
+ e.preventDefault();
+ document.getElementById(`show${si}slide${slideCurrent}`)
+ .style.display = "none";
+ slideCurrent --;
+ if (slideCurrent < 0) {
+ slideCurrent = slideCount - 1;
+ }
+ document.getElementById(`show${si}slide${slideCurrent}`)
+ .style.display = "block";
+ });
+ }
+ }
+ slideCount = i;
+ slideshow.children[0].style.display = "block";
+ s++;
+ }
+
+ // sets up the dimmer close button
+ const dim = document.getElementById("dim");
+ const close = document.querySelector("#dim span");
+ close.addEventListener("click", (e) => {
+ dim.style.opacity = 0;
+ dim.style.pointerEvents = "none";
+ close.style.pointerEvents = "none";
+ try {
+ let copy = document.getElementById("enlargeCopy");
+ copy.style.opacity = 0;
+ setTimeout(function () { copy.remove() }, 500);
+ } catch {}
+ });
+
+ // sets up the image enlarge
+ const images = document.getElementsByTagName("img");
+ for (image of images) {
+ image.addEventListener("click", (e) => {
+ // dim the lights
+ dim.style.opacity = 0.7;
+ dim.style.pointerEvents = "auto";
+ close.style.pointerEvents = "auto";
+
+ // get origional image position
+ let rect = e.target.getBoundingClientRect();
+
+ // bring up the image
+ let copy = e.target.cloneNode();
+ copy.id = "enlargeCopy";
+ copy.style.position = "absolute";
+ copy.style.top = `${rect.top}px`;
+ copy.style.left = `${rect.left}px`;
+ copy.style.width = `${rect.width}px`;
+ copy.style.height = `${rect.height}px`;
+
+ copy.style.opacity = 1;
+ copy.style.transition = `
+ opacity 0.3s,
+ top 0.3s,
+ left 0.3s,
+ width 0.3s,
+ height 0.3s
+ `;
+
+ dim.after(copy);
+
+ setTimeout(function () {
+ copy.style.objectFit = "contain";
+ copy.style.top = "3vh";
+ copy.style.left = "3vw";
+ copy.style.width = "94vw";
+ copy.style.height = "94vh";
+ }, 50);
+ });
+ }
+
+}
+
+setup();
projects / threshold / commitdiff
