Half implemented the slideshow switch in enhance

diff --git a/personal/riders/index.html b/personal/riders/index.html
index 099e3a858b4425b8a27af8a669cd13bcb9976bf7..1f4af46e27fa39c225cd502f7c85a3db50a0cd15 100644 (file)
--- 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 241c8e2ec5eab0a082397ca02f91d0d55c71617b..49a97b1a7c982a6a9a558e477ca7bcaed091dfc7 100644 (file)
--- 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 21aceda60e88bce388dfa70627643498f94bc58d..4cc4e8f4c265fd70bf6aba8e51ce245bd144e0e7 100644 (file)
--- 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; }
 }