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-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);
width: 60%;
height: var(--h-header);
max-height: var(--h-header);
margin: 2.5vh auto;
text-align: center;
z-index: 1;
@ -71,13 +72,14 @@ a:hover {
#logo {
position: relative;
height: 100%;
height: auto%;
}
#logo img {
filter: grayscale(1);
width: calc(var(--h-header) + 3vh);
margin-top: -1.5vh;
margin-bottom: -1.5vh;
}
#logo img:hover {
@ -92,11 +94,12 @@ a:hover {
/******************* EXHIBITION *******************/
/* Remove scrollbar in all browsers */
::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;}
/* Remove scrollbar in webkit */
::-webkit-scrollbar{width:0px; height:0px;}
::-webkit-scrollbar-button{width:0px; height:0px;}
#exhibition {
/* Remove scrollbar in FF */
scrollbar-width: none;
transform-origin: bottom left;
@ -130,7 +133,7 @@ a:hover {
}
.thumb {
filter: blur(2px) grayscale(1);
filter: grayscale(1);
width: 100%;
height: 100%;
}
@ -206,6 +209,7 @@ a:hover {
background-repeat: no-repeat;
background-position: center;
max-width: 60%;
height: 100%;
}
@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);
}
// save last eventlistener func to remove it...
var resize;
function showOverlay(overlay, imgName) {
let info = getInfoForImg(imgName);
let magni = document.getElementById("zoom");
let infoTable = document.getElementById("img-description");
let img = document.createElement("img");
// 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)});
// fix for the zoom factor after resize
window.addEventListener("resize", () => {zoom(0.4, imgName)});
img.src = `/inc/images/${imgName}.jpg`;
img.id = imgName;
img.alt = imgName;

15
inc/js/zoom.js
View File

@ -7,19 +7,13 @@
* Version: 1.2
*/
function zoom(factor, imgName) {
console.log("CALL:" + imgName);
let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
let img = document.getElementById(imgName);
let magni = img.parentElement;
magni.style.backgroundImage = `url("${img.src}")`;
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)
magni.style.padding = offset.y + "px " + offset.x + "px";
// 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.addEventListener("touchmove", (e) => {
// e.preventDefault();
// moveBackground(getOffsetToMiddle(e));
// });
img.addEventListener("mousemove", (e) => {
moveBackground(getOffsetToMiddle(e));
});

1
tmpl/layouts/base.html
View File

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

1
tmpl/layouts/index.html
View File

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