From: Max Value <greenwoodw50@gmail.com>
Date: Tue, 21 Apr 2026 22:14:54 +0000 (+0100)
Subject: Half implemented the slideshow switch in enhance
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=0d7b893216d13e9459cb65e61574254f44cb7760;p=chester

Half implemented the slideshow switch in enhance
---

diff --git a/personal/riders/index.html b/personal/riders/index.html
index 099e3a8..1f4af46 100644
--- a/personal/riders/index.html
+++ b/personal/riders/index.html
@@ -141,7 +141,6 @@
 	Many of the Riders I spoke to, or who saw me speaking to others and taking their photos, were suspicious that I might be working with the police or with their companies. Having explained the project to them, many didn't want to show their faces or be seen to be involved in what I was trying to do. I learnt from some Riders that this was probably because lots of people work on fake or shared work permits. The reason for this is that so many migrants that come into the UK are unable to obtain legitimate work permits from the government, forcing them to go down illegitimate routes. I spoke to one Rider who expanded on this, referring to a "mafia" from which Riders can buy fake work permits and other papers they might need. With no other options, people are forced into shady deals, paying fees of well over a few hundred pounds to get everything they need to appear as though they are working lawfully.
 </p>
 
-
 <div class="slideshow aggregating includeOnly">
 	<img
 		src="/media/photos_3840/riders-anonymous3.jpg" />
diff --git a/script.js b/script.js
index 241c8e2..49a97b1 100644
--- a/script.js
+++ b/script.js
@@ -47,6 +47,10 @@ function setup () {
 	dim.appendChild(close);
 	main.parentNode.appendChild(dim);
 
+	const copyBox = document.createElement("div");
+	copyBox.id = "enlargeCopyBox";
+	main.parentNode.appendChild(copyBox);
+
 	close.addEventListener("click", (e) => {
 		dim.style.backgroundColor = "rgba(51,51,51,0)";
 		dim.style.opacity = 0;
@@ -67,9 +71,12 @@ function setup () {
 		dim.style.pointerEvents = "none";
 		close.style.pointerEvents = "none";
 		try {
-			let copy = document.getElementById("enlargeCopy");
-			copy.style.opacity = 0;
-			setTimeout(function () { copy.remove() }, 500);
+			let copyBox = document.getElementById("enlargeCopyBox");
+			copyBox.style.opacity = 0;
+			setTimeout(function () {
+				copyBox.style = "";
+				copyBox.innerHTML = "";
+			}, 200);
 		} catch {}
 	});
 
@@ -87,32 +94,56 @@ function setup () {
 			// get origional image position
 			let rect = e.target.getBoundingClientRect();
 
-			// bring up the image
+			// check if the image is in a slide show
+			let filename = e.target.src.split("/").at(-1);
+			let element = document.querySelector(`.slideshow > img[src$="${filename}"]`);
+
 			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.objectFit = "contain";
-			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);
+			copyBox.append(copy);
+
+			if (null != null) { // element
+				const zoomPrev = document.createElement("span");
+				zoomPrev.classList.add("prev");
+				const zoomPrevImage = document.createElement("img");
+				zoomPrevImage.src = "/media/arrow.svg";
+				zoomPrev.src = "/media/arrow.svg";
+				zoomPrev.addEventListener("click", (e) => {
+					console.log("previous image");
+				});
+
+				const zoomNext = document.createElement("span");
+				zoomNext.classList.add("next");
+				const zoomNextImage = document.createElement("img");
+				zoomNextImage.src = "/media/arrow.svg";
+				zoomNext.addEventListener("click", (e) => {
+					console.log("next image")
+				});
+
+				copyBox.prepend(zoomPrev);
+				copyBox.append(zoomNext);
+			}
+
+			copyBox.style.position = "absolute";
+			copyBox.style.top = `${rect.top}px`;
+			copyBox.style.left = `${rect.left}px`;
+			copyBox.style.width = `${rect.width}px`;
+			copyBox.style.height = `${rect.height}px`;
+
+			copyBox.style.opacity = 1;
+			copyBox.style.transition = `
+			opacity 0.3s,
+			top 0.3s,
+			left 0.3s,
+			width 0.3s,
+			height 0.3s
+			`;
 
 			setTimeout(function () {
-				copy.style.top = "5vh";
-				copy.style.left = "5vw";
-				copy.style.width = "90vw";
-				copy.style.height = "90vh";
+				copyBox.style.top = "5vh";
+				copyBox.style.left = "5vw";
+				copyBox.style.width = "90vw";
+				copyBox.style.height = "90vh";
 			}, 50);
 		});
 	}
@@ -205,7 +236,7 @@ function setup () {
 		<li><s>Portrait slideshow on full on mobile</s></li>
 		<li><s>Menu text slightly bigger</s></li>
 		<li><s>Enbolden the top-level menu</s></li>
-		<li>Commit the slideshow switch between</li>
+		<li><b>Commit the slideshow switch between</b></li>
 		<li><s>Text in nav bar on desktop</s></li>
 	</ul>
 </details>`;
diff --git a/style.css b/style.css
index 21aceda..4cc4e8f 100644
--- a/style.css
+++ b/style.css
@@ -322,6 +322,41 @@ blockquote {
 .menuBack { display: none; }
 .menuBar { display: none; }
 
+#enlargeCopyBox { pointer-events: none; }
+#enlargeCopy {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+#enlargeCopyBox > span {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	vertical-align: top;
+	width: 27%;
+	height: 100%;
+	line-height: 100%;
+	z-index: 0;
+	color: var(--darkgray);
+	flex-wrap: nowrap;
+	transition: opacity 0.5s;
+}
+#enlargeCopyBox .prev {
+	justify-content: flex-end;
+	margin-left: -2%;
+	margin-right: -25%;
+	cursor: w-resize;
+	-webkit-transform: scaleX(-1);
+	transform: scaleX(-1);
+}
+#enlargeCopyBox .next {
+	justify-content: flex-end;
+	margin-left: -25%;
+	margin-right: -2%;
+	cursor: e-resize;
+}
+
+
 @media (orientation: portrait) {
 	:root {
 		font-size: 1.6em;
@@ -450,5 +485,6 @@ blockquote {
 
 @media (orientation: landscape) {
 	.scroll { overflow: scroll; }
+	img:not(.menuBack > img) { cursor: zoom-in; }
 }