From 8f298dfd393131e34c489a423cfc61cbd0bec605 Mon Sep 17 00:00:00 2001 From: Max Value Date: Mon, 23 Mar 2026 17:45:05 +0000 Subject: [PATCH] Implemented aggregating slideshow with includeOnly + fixed future issue with multiple slideshows on one page --- personal/riders/index.html | 26 ++--------- script.js | 4 +- slideshow.js | 94 ++++++++++++++++++++++++++------------ style.css | 6 +-- 4 files changed, 74 insertions(+), 56 deletions(-) diff --git a/personal/riders/index.html b/personal/riders/index.html index 92acbbc..3babb6d 100644 --- a/personal/riders/index.html +++ b/personal/riders/index.html @@ -55,6 +55,7 @@
Anonymous 2
"Now I'm living here for like three years, I want to- I don't know. I want to see, because I'm confused. Before it was good, but now I'm confused." -
- - - -

- ◄ Prev. -

- Next ► -

-
+ +

False permits are not the only cause for suspicion and unease. Riders are also constantly facing trouble from the police, with bike seizures being a regular occurrence. Some electric bikes are rented out from legitimate companies. Some, however, are homemade, taped and strapped together with duct tape and bungee cord, built with batteries and motors salvaged or ordered online, some of which happen to be illegal in the UK. Lots of riders told me about the enormous setbacks that police seizures cause, with bikes costing up to a thousand pounds, if not more. Not only could that be months worth of wages gone with no reprieve, it also forces Riders to stop working for however long it takes them to get back up and running again. diff --git a/script.js b/script.js index daa0283..6db60fa 100644 --- a/script.js +++ b/script.js @@ -151,13 +151,13 @@ function setup () {

!--> `; main.parentNode.insertBefore(template.content.childNodes[0], main); - console.log(); - } setup(); diff --git a/slideshow.js b/slideshow.js index 2383516..6aa88bf 100644 --- a/slideshow.js +++ b/slideshow.js @@ -6,42 +6,78 @@ function setupSlideshow () { slideshows = document.getElementsByClassName("slideshow"); let s = 0; for (slideshow of slideshows) { + slideshow.dataset.slideCount = 1; + slideshow.dataset.slideCurrent = 0; + let i = 0; - for (child of slideshow.children) { - if (child.tagName == "IMG") { + if (slideshow.classList.contains("aggregating")) { + let selector = "img"; + if (slideshow.classList.contains("includeOnly")) { + selector = "img.include"; + } + + for (image of document.querySelectorAll(selector)) { + const slide = image.cloneNode(false); + slide.style.display = "none"; + slide.id = `show${s}slide${i}`; + + slideshow.appendChild(slide); + + i++; + } + } else { + for (child of slideshow.children) { 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.dataset.slideCount = i; slideshow.children[0].style.display = "block"; + + // add slideshow buttons + var si = s; + + const prev = document.createElement("span"); + prev.classList.add("prev"); + prev.innerHTML = "Prev"; + prev.addEventListener("click", (e) => { + e.preventDefault(); + + let slideCount = e.target.parentNode.dataset.slideCount; + + document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`) + .style.display = "none"; + e.target.parentNode.dataset.slideCurrent --; + if (e.target.parentNode.dataset.slideCurrent < 0) { + e.target.parentNode.dataset.slideCurrent = slideCount - 1; + } + document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`) + .style.display = "block"; + }); + + const next = document.createElement("span"); + next.classList.add("next"); + next.innerHTML = "Next"; + next.addEventListener("click", (e) => { + e.preventDefault(); + + let slideCount = e.target.parentNode.dataset.slideCount; + + document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`) + .style.display = "none"; + e.target.parentNode.dataset.slideCurrent ++; + if (e.target.parentNode.dataset.slideCurrent >= slideCount) { + e.target.parentNode.dataset.slideCurrent = 0; + } + document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`) + .style.display = "block"; + }); + + slideshow.appendChild(prev); + slideshow.appendChild(next); + s++; } } diff --git a/style.css b/style.css index c4653cd..ecd40a7 100644 --- a/style.css +++ b/style.css @@ -127,14 +127,14 @@ blockquote { width: calc(55vw - 25px); } .slideshow img { width: calc(55vw - 25px); } -.slideshow p { +.slideshow span { display: inline-block; width: 30%; padding: 0 10% 0 10%; color: var(--darkgray); } -.slideshow p:hover { color: var(--mediumgray); } -.slideshow p span { cursor: pointer; } +.slideshow span:hover { color: var(--mediumgray); } +.slideshow span { cursor: pointer; } .next { text-align: right; } .prev { text-align: left; } .arrow { -- 2.39.2