www/image-modal.js

@@ -5,8 +5,6 @@ for (const image of images) {
     const close = image.querySelector('.close')
     const lazy_image = image.querySelector('.lazy-image')
     const zoom = modal.querySelector('input')
-    const open = image.querySelector('input');
-    const thumbnail = image.querySelector('img');
     
     // for pan
     let grabbed = false;
@@ -18,84 +16,47 @@ for (const image of images) {
     let clickY = 0;
     let initW = lazy_image.clientWidth;
     let initH = lazy_image.clientHeight;
-
-    // for aspect
-    function fixAspectRatio() {
-        let img_aspect = thumbnail.clientWidth / thumbnail.clientHeight
-        let window_aspect = window.innerWidth / window.innerHeight;
-        let base = zoom.checked ? 200 : 90;
-
-        if (img_aspect > window_aspect) {
-            // img wider than window
-            lazy_image.style['min-width'] = base + 'vw';
-            lazy_image.style['min-height'] = (base * thumbnail.clientHeight / thumbnail.clientWidth) + 'vw';
-        } else {
-            // window wider than img
-            lazy_image.style['min-width'] = (base * img_aspect) + 'vh';
-            lazy_image.style['min-height'] = base + 'vh';
-        }
-    }
-    thumbnail.addEventListener('load', fixAspectRatio);
     
     // pan the image
     lazy_image.addEventListener('mouseleave', () => {grabbed = false;});
     lazy_image.addEventListener('mouseup', () => {
         grabbed = false;
     });
-    lazy_image.addEventListener('mousedown', e => {
+    lazy_image.addEventListener('mousedown', (e) => {
         grabbed = true;
         startX =  modal.scrollLeft + e.pageX;
         startY =  modal.scrollTop + e.pageY;
-
+        
         // set stuff for zoom
         clickX = e.clientX - lazy_image.offsetLeft;
         clickY = e.clientY - lazy_image.offsetTop;
         initW = lazy_image.clientWidth;
         initH = lazy_image.clientHeight;
     });
-    lazy_image.addEventListener('mousemove', e => {
+    lazy_image.addEventListener('mousemove', (e) => {
         if(!grabbed) return;
         modal.scrollLeft = startX - e.pageX;
         modal.scrollTop = startY - e.pageY;
     });
 
     // unzoom on close
-    open.addEventListener('change', () => {
+    close.addEventListener('click', () => {
-        if (!open.checked) zoom.checked = false;
+        zoom.checked = false;
     });
 
     // zoom to click target
     zoom.addEventListener('change', e => {
-        fixAspectRatio();
         if (zoom.checked) {
             zoom_factor = Math.max(
                 lazy_image.clientWidth / initW,
                 lazy_image.clientHeight / initH
             );
+            console.log(zoom_factor);
             x = clickX * zoom_factor - (window.innerWidth / 2);
             y = clickY * zoom_factor - (window.innerHeight / 2);
+            console.log('zoom 2 ' + x + ', ' + y);
             modal.scrollLeft = x;
             modal.scrollTop = y;
         }
-    });
+    })
-
+}
-    // resize image plane to match image aspect ratio
-    open.addEventListener('change', e => {
-        if (open.checked) {
-            fixAspectRatio();
-            window.addEventListener('resize', fixAspectRatio);
-        } else {
-            window.removeEventListener('resize', fixAspectRatio);
-        }
-    });
-
-    // close image on escape key
-    document.addEventListener('keydown', e => {
-        if (e.key == 'Escape') {
-            open.checked = false;
-            zoom.checked = false;
-        }
-    });
-}
-
-

www/index.html

@@ -67,13 +67,9 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="lpcl" class="thumbnail">
+                            <label for="lpcl"><img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen"></label>
-                                <img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen">
-                            </label>
                             <input type="checkbox" id="lpcl">
-                            <div class="modal">
+                            <div class="modal"><label for="lpcl" class="modal-bg"></label><label for="lpcl" class="close"></label>
-                                <label for="lpcl" class="modal-bg"></label>
-                                <label for="lpcl" class="close"></label>
                                 <label>
                                     <input type="checkbox">
                                     <div class="lazy-image" style="background-image: url('/img/peercord-login.png')"></div>
@@ -81,7 +77,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lpcc" class="thumbnail">
+                            <label for="lpcc">
                                 <img src="/img/peercord-chat-thumb.webp" alt="PeerCord login screen">
                             </label>
                             <input type="checkbox" id="lpcc">
@@ -115,7 +111,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="lio" class="thumbnail">
+                            <label for="lio">
                                 <img src="/img/ilo-overview-thumb.webp" alt="overview of my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lio">
@@ -129,7 +125,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lit" class="thumbnail">
+                            <label for="lit">
                                 <img src="/img/ilo-temperatures-thumb.webp" alt="temperature sensor data shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lit">
@@ -143,7 +139,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lid" class="thumbnail">
+                            <label for="lid">
                                 <img src="/img/ilo-drives-thumb.webp" alt="drive health, status, and temperature shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lid">
@@ -157,7 +153,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lifci" class="thumbnail">
+                            <label for="lifci">
                                 <img src="/img/ilo-fan-and-cpu-info-thumb.webp" alt="fan speed, fan health, fan status, and cpu status shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lifci">
@@ -191,7 +187,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="sma" class="thumbnail">
+                            <label for="sma">
                                 <img src="/img/smbus-mitm-arduino-thumb.webp" alt="the arduino leonardo that's attached to my battery, complete with small OLED display">
                             </label>
                             <input type="checkbox" id="sma">
@@ -205,7 +201,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="smw" class="thumbnail">
+                            <label for="smw">
                                 <img src="/img/smbus-mitm-wiring-thumb.webp" alt="wiring to intercept communications between the BMS and the laptop">
                             </label>
                             <input type="checkbox" id="smw">
@@ -233,7 +229,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="scst" class="thumbnail">
+                            <label for="scst">
                                 <img src="/img/security-camera-stream-thumb.webp" alt="two phones, one streaming video to another over the network">
                             </label>
                             <input type="checkbox" id="scst">
@@ -247,7 +243,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="scsc" class="thumbnail no-crop">
+                            <label for="scsc">
                                 <img src="/img/security-camera-screenshot-thumb.webp" alt="screenshot of the app while it's recording video">
                             </label>
                             <input type="checkbox" id="scsc">
@@ -276,7 +272,7 @@
                     <div class="double-screenshot">
 
                         <div class="project-image">
-                            <label for="r" class="thumbnail">
+                            <label for="r">
                                 <img src="/img/roomba-thumb.webp" alt="a normal Roomba with a webcam, Raspberry pi, Arduino, and a voltage regulator mounted on it">
                             </label>
                             <input type="checkbox" id="r">
@@ -290,7 +286,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="rc" class="thumbnail">
+                            <label for="rc">
                                 <img src="/img/roomba-control-thumb.webp" alt="webpage for controlling the Roomba and viewing the live feed">
                             </label>
                             <input type="checkbox" id="rc">

www/style.css

@@ -187,37 +187,20 @@ h3 {
     align-items: center;
 }
 
-.double-screenshot .thumbnail {
+.double-screenshot img {
-    display: flex;
+    width: 450px;
-    align-items: center;
-    justify-content: center;
-    width: 444px;
-    max-width: calc(min(450px,calc(100vw - 100px)));
-    max-height: 253.125px;
-    overflow: hidden;
-    margin: 3px;
-    cursor: pointer;
-}
-
-.double-screenshot .thumbnail img {
-    min-width: calc(min(450px,calc(100vw - 100px)));
-    min-height: calc(min(450px,calc(100vw - 100px)) * 0.5625);
-}
-.double-screenshot .no-crop img {
-    min-width: auto;
-    max-width: calc(min(450px,calc(100vw - 100px)));
-    min-height: auto;
-    max-height: 253.125px;
-}
-
-.project-image {
     max-width: 100%;
+    vertical-align: middle;
 }
 
 .project-image input {
     display: none;
 }
 
+.project-image img {
+    cursor: pointer;
+}
+
 .modal {
     display: none;
 }
@@ -237,6 +220,8 @@ input:checked + .modal {
 }
 
 .lazy-image {
+    width: 500px;
+    height: 500px;
     min-width: 90vw;
     min-height: 90vh;
     background-size: contain;