zoom.js functional, spacing of thumbs consistent
This commit is contained in:
parent
2bb6089201
commit
17fb0124df
23
exhibit.go
23
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)
|
||||
@ -22,13 +21,13 @@ func main() {
|
||||
}
|
||||
|
||||
type Picture struct {
|
||||
Name string
|
||||
Author string
|
||||
Size string
|
||||
Tools string
|
||||
Date string
|
||||
Price float32
|
||||
Desc string
|
||||
Name string
|
||||
Author string
|
||||
Size string
|
||||
Tools string
|
||||
Date string
|
||||
Price float32
|
||||
Desc string
|
||||
BlogLink string
|
||||
}
|
||||
|
||||
@ -65,9 +64,9 @@ func (ex *Exhibition) parsePictures(dir string) {
|
||||
}
|
||||
|
||||
for _, f := range files {
|
||||
if ! f.IsDir() {
|
||||
if !f.IsDir() {
|
||||
ex.Pics = append(ex.Pics,
|
||||
Picture{Name: strings.Trim(f.Name(), ".jpg")})
|
||||
Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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,24 +87,31 @@ 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 {
|
||||
.thumb-box:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(2px) grayscale(1);
|
||||
}
|
||||
|
||||
.thumb:hover {
|
||||
cursor: pointer;
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
#exhibition img:last-child {
|
||||
margin-bottom: 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;
|
||||
}
|
||||
|
@ -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) {
|
||||
|
61
inc/js/zoom.js
Normal file
61
inc/js/zoom.js
Normal file
@ -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};
|
||||
};
|
||||
}
|
@ -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>
|
@ -5,7 +5,9 @@
|
||||
</section>
|
||||
<section id="exhibition">
|
||||
{{range .Pics}}
|
||||
<img alt="{{.Name}}" src="/inc/thumbs/t_{{.Name}}.jpg" data-img="{{.Name}}" class="thumb" />
|
||||
<div class="thumb-box">
|
||||
<img alt="{{.Name}}" src="/inc/thumbs/t_{{.Name}}.jpg" data-img="{{.Name}}" class="thumb" />
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
|
@ -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}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user