Slideshow buttons and slideshow sizing

diff --git a/commercial/le-blanc-fine-art/index.html b/commercial/le-blanc-fine-art/index.html
index d05af75e7162c4e5c975674de4c988bac26e9b98..99a2147a1a1dc6addd74d2dc72f39390f548cf8f 100644 (file)
--- 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 53367919b12f5b5006345c34efa0663a1cf51e58..f364dbba2d923f6daee5b33869d970f222cec339 100644 (file)
--- 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 a46ffd92ef1e31f265b532c72182308209a30cad..f2a2774bea20c5f750235a78cee4afcf56396640 100644 (file)
--- 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 3fd568dca59bfdc3ba78593e696019410729daeb..3c11752d2704975672de11d3af1ae420bc0db204 100644 (file)
--- 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 63af4d1d572e8d3da219e58bac197952fd31330f..fc07b735cfdcbb60647d4e1efe2a34d50d3b33fe 100644 (file)
--- 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 bd5727f231788880e839a7fd6fa140f59303290c..9d9f24412f4f8cb4485ad9bd7411b53bb45a63c4 100644 (file)
--- 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 307a677f85d36fb664380d86112f874a83e1b588..f9285a8828d94cf4a2f3a3ec01dd177e18e22cc2 100644 (file)
--- 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 = "◄";
+               prev.innerHTML = "⮜";
                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 = "►";
+               next.innerHTML = "⮞";
                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 00269a38ce0854f242c6f6b3da27fa15445877ae..208b55e9ac70c83dfead3610d22fdf1be4882b18 100644 (file)
--- 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 {