From: Max Value <greenwoodw50@gmail.com>
Date: Tue, 7 Apr 2026 12:52:41 +0000 (+0100)
Subject: Slideshow buttons and slideshow sizing
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=4c88cca6b337046abb26394e255cff543086f516;p=chester

Slideshow buttons and slideshow sizing
---

diff --git a/commercial/le-blanc-fine-art/index.html b/commercial/le-blanc-fine-art/index.html
index d05af75..99a2147 100644
--- a/commercial/le-blanc-fine-art/index.html
+++ b/commercial/le-blanc-fine-art/index.html
@@ -48,7 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow">
+			<div class="slideshow full">
 				<img
 					srcset="/media/photos_960/le-blanc-fine-art1.jpg,
 						/media/photos_1920/le-blanc-fine-art1.jpg x2,
diff --git a/commercial/live-music/index.html b/commercial/live-music/index.html
index 5336791..f364dbb 100644
--- a/commercial/live-music/index.html
+++ b/commercial/live-music/index.html
@@ -48,7 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow">
+			<div class="slideshow full">
 				<img
 					srcset="/media/photos_960/live-music1.jpg,
 						/media/photos_1920/live-music1.jpg x2,
diff --git a/personal/cotton-town/index.html b/personal/cotton-town/index.html
index a46ffd9..f2a2774 100644
--- a/personal/cotton-town/index.html
+++ b/personal/cotton-town/index.html
@@ -48,7 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow">
+			<div class="slideshow full">
 				<img
 					srcset="/media/photos_960/cotton-town1.jpg,
 						/media/photos_1920/cotton-town.jpg x2,
diff --git a/personal/memorabilia/index.html b/personal/memorabilia/index.html
index 3fd568d..3c11752 100644
--- a/personal/memorabilia/index.html
+++ b/personal/memorabilia/index.html
@@ -48,7 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow">
+			<div class="slideshow full">
 				<img
 					srcset="/media/photos_960/zine1.png,
 						/media/photos_1920/zine1.png x2,
diff --git a/personal/photojournalism/index.html b/personal/photojournalism/index.html
index 63af4d1..fc07b73 100644
--- a/personal/photojournalism/index.html
+++ b/personal/photojournalism/index.html
@@ -48,7 +48,7 @@
 			</ul>
 		</nav>
 		<main>
-			<div class="slideshow">
+			<div class="slideshow full">
 				<img
 					srcset="/media/photos_960/photojournalism1.jpg,
 						/media/photos_1920/photojournalism1.jpg x2,
diff --git a/script.js b/script.js
index bd5727f..9d9f244 100644
--- a/script.js
+++ b/script.js
@@ -71,7 +71,7 @@ function setup () {
 	});
 
 	// sets up the image enlarge
-	const images = document.getElementsByTagName("img");
+	const images = document.querySelectorAll("img:not(.full)");
 	for (image of images) {
 		image.addEventListener("click", (e) => {
 			// dim the lights
@@ -92,6 +92,7 @@ function setup () {
 			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,
@@ -104,7 +105,6 @@ function setup () {
 			dim.after(copy);
 
 			setTimeout(function () {
-				copy.style.objectFit = "contain";
 				copy.style.top = "5vh";
 				copy.style.left = "5vw";
 				copy.style.width = "90vw";
@@ -176,6 +176,9 @@ function setup () {
 		<li>About me text 10% bigger</li>
 		<li>Move text from inside the slideshows to below the slideshows</li>
 		<li>Added memorabilia title to match cotton town</li>
+		<li>Fixed visual glitch when enlarging contain-fitted image</li>
+		<li>Slideshow larger when in full mode</li>
+		<li>Changed slideshow styling on the buttons</li>
 	</ul>
 	<p>Still todo:</p>
 	<ul>
@@ -185,7 +188,6 @@ function setup () {
 		<li>Annotated images</li>
 		<li>Look into image scaling mechanic</li>
 		<li>Possibly closed captions on audio</li>
-		<li>Slideshow larger when alone on a page</li>
 	</ul>
 </details>`;
 
diff --git a/slideshow.js b/slideshow.js
index 307a677..f9285a8 100644
--- a/slideshow.js
+++ b/slideshow.js
@@ -34,14 +34,14 @@ function setupSlideshow () {
 		}
 
 		slideshow.dataset.slideCount = i;
-		slideshow.children[0].style.display = "block";
+		slideshow.children[0].style.display = "inline-block";
 
 		// add slideshow buttons
 		var si = s;
 
 		const prev = document.createElement("span");
 		prev.classList.add("prev");
-		prev.innerHTML = "&#x25c4;";
+		prev.innerHTML = "&#11164;";
 		prev.addEventListener("click", (e) => {
 			e.preventDefault();
 
@@ -54,12 +54,12 @@ function setupSlideshow () {
 				e.target.parentNode.dataset.slideCurrent = slideCount - 1;
 			}
 			document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`)
-			.style.display = "block";
+			.style.display = "inline-block";
 		});
 
 		const next = document.createElement("span");
 		next.classList.add("next");
-		next.innerHTML = "&#x25ba;";
+		next.innerHTML = "&#11166;";
 		next.addEventListener("click", (e) => {
 			e.preventDefault();
 
@@ -73,11 +73,11 @@ function setupSlideshow () {
 				e.target.parentNode.dataset.slideCurrent = 0;
 			}
 			document.getElementById(`show${si}slide${e.target.parentNode.dataset.slideCurrent}`)
-			.style.display = "block";
+			.style.display = "inline-block";
 		});
 
-		slideshow.appendChild(prev);
-		slideshow.appendChild(next);
+		slideshow.prepend(prev);
+		slideshow.append(next);
 
 		s++;
 	}
diff --git a/style.css b/style.css
index 00269a3..208b55e 100644
--- a/style.css
+++ b/style.css
@@ -132,42 +132,41 @@ blockquote {
 	height: calc((55vw - 25px) / 1.5);
 }
 .slideshow.full {
-	margin-right: -3vw;
-	width: calc(55vw - 25px + 3vw);
-	height: calc((55vw - 25px + 3vw) / 1.5);
+	--full-overhang: 8vw;
+	margin-right: calc(-1 * var(--full-overhang));
+	width: calc(55vw - 25px + var(--full-overhang));
+	height: calc((55vw - 25px + var(--full-overhang)) / 1.5);
 }
 .slideshow > *:not(span) {
-	width: 100%;
+	display: inline-block;
+	width: 99%;
 	height: 100%;
 	object-fit: contain;
 }
-.slideshow.full > *:not(span) {
-	width: 100%;
-	height: 100%;
-}
 .slideshow > span {
-	display: inline-block;
-	width: calc(25% - 2.5px);
-	height: 25px;
-	margin-top: 5px;
-	color: var(--darkgray);
-	background-color: #DDDDDD;
-	text-align: center;
-	line-height: 25px;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	vertical-align: top;
+	width: 27%;
+	height: 100%;
+	line-height: 100%;
+	z-index: 0;
+	cursor: pointer;
+	color: var(--darkgray)
 }
-.slideshow > span:hover {
-	color: var(--mediumgray);
-	background-color: #CCCCCC;
+.slideshow > span:hover { color: var(--mediumgray); }
+.prev {
+	justify-content: flex-start;
+	margin-left: -2%;
+	margin-right: -25%;
 }
-.slideshow > span { cursor: pointer; }
 .next {
-	text-align: right;
-	margin: 0 25% 0 2.5px;
-}
-.prev {
-	text-align: left;
-	margin: 0 2.5px 0 25%;
+	justify-content: flex-end;
+	margin-left: -25%;
+	margin-right: -2%;
 }
+
 .slideshow:first-child { margin-top: 0; }
 
 .centering {