zoom.js functional, spacing of thumbs consistent

exhibit.go

@@ -1,10 +1,10 @@
 package main
 
 import (
-	"log"
-	"net/http"
 	"html/template"
 	"io/ioutil"
+	"log"
+	"net/http"
 	"strings"
 	// "fmt"
 )
@@ -12,7 +12,6 @@ import (
 // var t = template.Must(template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/blog.html", "tmpl/about.html", "tmpl/contact.html", ))
 
 func main() {
-
 	http.HandleFunc("/", handleIndex)
 	// http.Handle("/blog", handleBlog)
 	// http.Handle("/about", handleAbout)
@@ -67,7 +66,7 @@ func (ex *Exhibition) parsePictures(dir string) {
 	for _, f := range files {
 		if !f.IsDir() {
 			ex.Pics = append(ex.Pics,
-				Picture{Name: strings.Trim(f.Name(), ".jpg")})
+				Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
 		}
 	}
 }

inc/css/main.css

@@ -21,10 +21,8 @@
     font-size: 30px;
 }
 
-/* counteract the scale of the hexas (x-scrollbar) */
 html, body {
     max-width: 100%;
-    min-height: 100%;
     height: 100%;
     max-height: 100%;
     overflow: hidden;
@@ -81,7 +79,6 @@ a:hover {
 
     background-color: var(--c1);
     position: absolute;
-    /* bottom: ~15vh; Required in FF (JS)*/
     bottom: 0px;
     right: -20vh;
     width: 20vh;
@@ -90,25 +87,32 @@ a:hover {
     overflow-x: hidden;
 }
 
-#exhibition img {
+.thumb-box {
     height: 19.5vh;
     margin-top: 10vh;
-    max-width: 15.5vw;
-
-    filter: blur(2px) grayscale(1);
-
+    /* keep the ~ratio of a photo
+       (spacing should be the same all the time) */
+    width: calc(19.5vh*1.49);
     transform-origin: bottom left;
     transform: rotate(90deg) translateX(-30vh);
 }
 
-#exhibition img:hover {
-    filter: grayscale(0);
+.thumb-box:last-child {
+    margin-bottom: 0;
 }
 
-#exhibition img:last-child {
-    margin-bottom: 0;
+.thumb {
+    width: 100%;
+    height: 100%;
+    filter: blur(2px) grayscale(1);
 }
 
+.thumb:hover {
+    cursor: pointer;
+    filter: grayscale(0);
+}
+
+
 
 /******************* INFO *******************/
 
@@ -126,18 +130,13 @@ a:hover {
     background-color: var(--c1);
 }
 
-#info-box img {
-    height: 100%;
-    max-width: 60%;
-}
-
 #info-box table {
     /* box-sizing: border-box; */
     display: inline-block;
     position: absolute;
     height: auto;
     padding: 5vh;
-    /* Element won't respect the padding of parent >:|
+    /* Element does not respect the padding of parent >:|
        So I will make it respect it...*/
     top: 0;
     bottom: 0;
@@ -159,7 +158,8 @@ a:hover {
 }
 
 #btn-close {
-    line-height: 2.0vw; /* I made this a bit smaller to make alignment easier */
+    /* I made this a bit smaller to make alignment easier */
+    line-height: 2.0vw;
     font-size: 4.5vw;
     position: absolute;
     right: 2vw;
@@ -172,3 +172,19 @@ a:hover {
     opacity: 0.7;
     cursor: pointer;
 }
+
+#info-box img {
+    height: 100%;
+    max-width: 100%;
+}
+
+/******************* MAGNIFY *******************/
+
+.magnify {
+    display: inline-block;
+    max-width: 60%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-clip: content-box;
+}

inc/js/main.js

@@ -39,7 +39,9 @@ function showOverlay(overlay, imgName) {
     // \xD7 is the multiplication sign in hex
     overlay.children[0].innerHTML =
         `<div id="btn-close">\xD7</div>
-<img src="/inc/images/${imgName}.jpg" alt="${imgName}" />
+<div class="magnify">
+<img id=${imgName} src="/inc/images/${imgName}.jpg" alt="${imgName}" />
+</div>
 
 <table id="img-description">
 <tr>
@@ -68,6 +70,8 @@ function showOverlay(overlay, imgName) {
 </tr>
 </table>`;
     overlay.classList.remove("hidden");
+    // call my zoom function (zoom.js)
+    zoom(0.4, imgName);
 }
 
 function hideOverlay(overlay) {

inc/js/zoom.js

@@ -0,0 +1,61 @@
+/*
+* zoom.js
+* function for the purpose of my portfolio to zoom into
+* images inside their box without touching the rest of the layout.
+* Author: phga/teord
+* Date: 2019-10-20
+* Version: 1.0
+*/
+function zoom(factor, imgName) {
+    let img = document.getElementById(imgName);
+    let magni = img.parentElement;
+    magni.style.backgroundImage = `url("${img.src}")`;
+
+    // wait till size of img is calculated
+    setTimeout(() => {
+        var offset = {x: img.width * factor, y: img.height * factor};
+        magni.style.width = img.width;
+        // setup the padding (bigger zoom canvas)
+        magni.style.padding = offset.y + "px " + offset.x + "px";
+        // adjust the margin to ged rid of the extra size gained from padding
+        magni.style.margin = -offset.y + "px " + -offset.x + "px";
+    }, 500);
+
+    // Added a mouse(enter|move|leave) to make img transparent and show bg-img when it should be visible
+    img.addEventListener("mouseenter", (e) => {
+        img.style.opacity = 0;
+    });
+
+    img.addEventListener("mousemove", (e) => {
+        moveBackground(getOffsetToMiddle(e));
+    });
+
+    img.addEventListener("mouseleave", (e) => {
+        img.style.opacity = 1;
+    });
+
+    // Function to move the bg-img according to the current position in img
+    let moveBackground = function(pos) {
+        // It is always good to draw stuff the brain can't process :E
+        // * 2 because we have the offset on both sides
+        // -pos because we have inverted controls
+        magni.style.backgroundPosition = -pos.x * factor * 2 + "px " + -pos.y * factor * 2 + "px";
+    };
+
+    let getOffsetToMiddle = function(cursor) {
+        let elem, x = y = 0;
+        cursor = cursor || window.event;
+
+        // get elem bounding box
+        elem = img.getBoundingClientRect();
+
+        // calculate distance to middle of elem
+        x = cursor.pageX - (elem.left + elem.width / 2);
+        y = cursor.pageY - (elem.top + elem.height / 2);
+
+        // We do not have a scrolling page but you never know
+        x = x - window.pageXOffset;
+        y = y - window.pageYOffset;
+        return {x: x, y: y};
+    };
+}

tmpl/head.html

@@ -1,6 +0,0 @@
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>{{ .Site.Params.name | default "MEP MEP"}}</title>
-    <link href="/css/main.css" type="text/css" rel="stylesheet"/>
-</head>

tmpl/index.html

@@ -5,7 +5,9 @@
 </section>
 <section id="exhibition">
     {{range .Pics}}
+    <div class="thumb-box">
         <img alt="{{.Name}}" src="/inc/thumbs/t_{{.Name}}.jpg" data-img="{{.Name}}" class="thumb" />
+    </div>
     {{end}}
 </section>
 {{end}}

tmpl/layouts/base.html

@@ -5,6 +5,7 @@
         <title>Portfolio</title>
         <link href="/inc/css/main.css" rel="stylesheet"/>
         <script src="/inc/js/main.js"></script>
+        <script src="/inc/js/zoom.js"></script>
     </head>
     <body>
         {{block "header" .}}NO HEADER DEFINED{{end}}