phga/phga.de-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

working resize without error no scrollbars (really)

Browse Source
This commit is contained in:
Toerd@480 2019-10-24 10:56:34 +02:00
parent 34a21ffc85
commit 716663d850
5 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
inc/css/main.css
View File

@ -14,7 +14,7 @@
--h-info: 67.5vh; /* 100 - 32.5 */ --h-info: 67.5vh; /* 100 - 32.5 */
--h-ex: 15vh; /* + 2 * 2.5vh bottom (20.0)*/ --h-ex: 15vh; /* + 2 * 2.5vh bottom (20.0)*/
--h-ex-thumb: 14.5vh; --h-ex-thumb: 15.0vh;
} }
* { * {
@ -54,6 +54,7 @@ header {
background-color: var(--c1); background-color: var(--c1);
width: 60%; width: 60%;
height: var(--h-header); height: var(--h-header);
max-height: var(--h-header);
margin: 2.5vh auto; margin: 2.5vh auto;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
@ -71,13 +72,14 @@ a:hover {
#logo { #logo {
position: relative; position: relative;
height: 100%; height: auto%;
} }
#logo img { #logo img {
filter: grayscale(1); filter: grayscale(1);
width: calc(var(--h-header) + 3vh); width: calc(var(--h-header) + 3vh);
margin-top: -1.5vh; margin-top: -1.5vh;
margin-bottom: -1.5vh;
} }
#logo img:hover { #logo img:hover {
@ -92,11 +94,12 @@ a:hover {
/******************* EXHIBITION *******************/ /******************* EXHIBITION *******************/
/* Remove scrollbar in all browsers */ /* Remove scrollbar in webkit */
::-webkit-scrollbar{width:2px;height:2px;} ::-webkit-scrollbar{width:0px; height:0px;}
::-webkit-scrollbar-button{width:2px;height:2px;} ::-webkit-scrollbar-button{width:0px; height:0px;}
#exhibition { #exhibition {
/* Remove scrollbar in FF */
scrollbar-width: none; scrollbar-width: none;
transform-origin: bottom left; transform-origin: bottom left;
@ -130,7 +133,7 @@ a:hover {
} }
.thumb { .thumb {
filter: blur(2px) grayscale(1); filter: grayscale(1);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -206,6 +209,7 @@ a:hover {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
max-width: 60%; max-width: 60%;
height: 100%;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {

14
inc/js/main.js
View File

@ -35,15 +35,25 @@ function handleThumb(overlay, elem) {
showOverlay(overlay, imgName); showOverlay(overlay, imgName);
} }
// save last eventlistener func to remove it...
var resize;
function showOverlay(overlay, imgName) { function showOverlay(overlay, imgName) {
let info = getInfoForImg(imgName); let info = getInfoForImg(imgName);
let magni = document.getElementById("zoom"); let magni = document.getElementById("zoom");
let infoTable = document.getElementById("img-description"); let infoTable = document.getElementById("img-description");
let img = document.createElement("img"); let img = document.createElement("img");
// call my zoom function (zoom.js) // call my zoom function (zoom.js)
// fix for the zoom factor after resize (timeout to reduce calls)
let waitResize;
// remove for old img_names (named func required)
window.removeEventListener("resize", resize);
resize = () => {
clearTimeout(waitResize);
waitResize = setTimeout(() => {zoom(0.4, imgName)},50);
};
window.addEventListener("resize", resize);
img.addEventListener("load", () => {zoom(0.4, imgName)}); img.addEventListener("load", () => {zoom(0.4, imgName)});
// fix for the zoom factor after resize
window.addEventListener("resize", () => {zoom(0.4, imgName)});
img.src = `/inc/images/${imgName}.jpg`; img.src = `/inc/images/${imgName}.jpg`;
img.id = imgName; img.id = imgName;
img.alt = imgName; img.alt = imgName;

15
inc/js/zoom.js
View File

@ -7,19 +7,13 @@
* Version: 1.2 * Version: 1.2
*/ */
function zoom(factor, imgName) { function zoom(factor, imgName) {
console.log("CALL:" + imgName);
let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
let img = document.getElementById(imgName); let img = document.getElementById(imgName);
let magni = img.parentElement; let magni = img.parentElement;
magni.style.backgroundImage = `url("${img.src}")`; magni.style.backgroundImage = `url("${img.src}")`;
let offset = {x: img.width * factor, y: img.height * factor}; let offset = {x: img.width * factor, y: img.height * factor};
// Fix for firefox, somehow width larger than content (inline-block)
magni.style.width = "100%";
magni.style.width = img.width;
// mobile fix (for some browsers)
if (Math.max(document.documentElement.clientWidth, window.innerWidth) < 800) {
magni.style.height = "50%";
magni.style.height = img.height;
}
// setup the padding (bigger zoom canvas) // setup the padding (bigger zoom canvas)
magni.style.padding = offset.y + "px " + offset.x + "px"; magni.style.padding = offset.y + "px " + offset.x + "px";
// adjust the margin to ged rid of the extra size gained from padding // adjust the margin to ged rid of the extra size gained from padding
@ -30,11 +24,6 @@ function zoom(factor, imgName) {
img.style.opacity = 0; img.style.opacity = 0;
}); });
// img.addEventListener("touchmove", (e) => {
// e.preventDefault();
// moveBackground(getOffsetToMiddle(e));
// });
img.addEventListener("mousemove", (e) => { img.addEventListener("mousemove", (e) => {
moveBackground(getOffsetToMiddle(e)); moveBackground(getOffsetToMiddle(e));
}); });

1
tmpl/layouts/base.html
View File

@ -1,3 +1,4 @@
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>

1
tmpl/layouts/index.html
View File

@ -1,3 +1,4 @@
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>