Skip to content

Commit 5dcba7b

Browse files
EmreT58EmreT58
committed
touch device problem push - non simplified
1 parent b453a87 commit 5dcba7b

File tree

6 files changed

+189
-173
lines changed

6 files changed

+189
-173
lines changed

‎binnenkant.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
6+
<title>Binnenkant - La Tienda</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
9+
</head>
10+
<body>
11+
<div id="image-container">
12+
<div id="binnenkant"><img src="images/binnen-ss.png"></div>
13+
<div class="marker" id="magnetron"></div>
14+
<div class="textbox" id="magnetron-janinfo">
15+
<p>Two microwaves for $500 people heat their lunch</p>
16+
</div>
17+
<div class="textbox" id="magnetron-extrainfo">
18+
<p>Did you know 500 Colombian pesos is equal to 12 Euro cents</p>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎images/entrance.png

7.5 KB
Loading

‎index.html

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,37 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
6-
<title>Coffeeshop La Tienda</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Buitenkant - La Tienda</title>
77
<link rel="stylesheet" href="style.css">
88
<script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
99
</head>
1010

1111
<!-- Start met video, transitie naar sketch, typewriter animatie introductie en daarna auto scroll naar deur -->
1212
<!-- Vervolgens highlighted sketch met klikbare divs, als je divs klikt krijg je een witte vak met tekst te zien -->
1313

14+
<!-- <img id="binnenkant" src="images/binnen-ss.png"> -->
15+
<!-- binnenkant zetten op een andere pagina zodat de divs niet door elkaar heen gaan -->
16+
<!-- of aan de hand van displayed sketch vorige divs niet klikbaar maken -->
17+
1418
<body>
15-
<main>
16-
<div id="video-container">
17-
<h1>La Tienda</h1>
18-
<video autoplay muted loop><source src="images/"></video>
19-
</div>
2019

21-
<div id="image-container">
22-
<img id="buitenkant" src="images/buiten-ss.png">
23-
<div id="deur-buiten" onclick="naarBinnen()"></div>
20+
<div id="video-container">
21+
<h1>La Tienda</h1>
22+
<video autoplay muted loop><source src="images/"></video>
23+
</div>
2424

25-
<!-- <img id="binnenkant" src="images/binnen-ss.png"> -->
26-
<!-- binnenkant zetten op een andere pagina zodat de divs niet door elkaar heen gaan -->
27-
<!-- of aan de hand van displayed sketch vorige divs niet klikbaar maken -->
25+
<div id="image-container">
26+
<div id="binnenkant"><img src="images/buiten-ss.png"></div>
27+
<div class="marker" id="entrance"></div>
28+
<a href="binnenkant.html">
29+
<div class="textbox" id="entrance-info">
30+
<p>Enter?</p>
31+
<img src="images/entrance.png" alt="entrance icon">
32+
</div>
33+
</a>
2834

29-
</div>
30-
</main>
35+
</div>
3136
<script src="script.js"></script>
3237
</body>
3338
</html>

‎panzoom.html

Lines changed: 0 additions & 150 deletions
This file was deleted.

‎script.js

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
window.onload = function() {
1+
window.onload = function() { // Werkt niet met viewport meta tag op mobiel
22
// Get the dimensions of the image and the viewport
33
var image = document.getElementById('buitenkant'); // Replace 'yourImageId' with the actual ID of your image
44
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
@@ -14,4 +14,69 @@ window.onload = function() {
1414
left: scrollX,
1515
behavior: 'smooth' // You can adjust this to 'auto' or 'instant' based on your preference
1616
});
17-
};
17+
};
18+
19+
// https://github.com/anvaka/panzoom
20+
21+
var zoomer = panzoom(document.querySelector("#image-container"), {
22+
maxZoom: 20,
23+
minZoom: 1,
24+
});
25+
26+
zoomer.on("zoom", event => document.querySelectorAll('.marker[data-visible]').forEach(checkIfZoomed));
27+
28+
function checkIfZoomed(marker) {
29+
let treshold = 0.08; //op desktop emulatie werkt 0.3 goed maar op echte mobiel werkt 0.08 goed??
30+
let markerSize = marker.getBoundingClientRect();
31+
if (markerSize.width / self.innerWidth > treshold) {
32+
if (!marker.hasAttribute("data-active")) {
33+
34+
// Checks
35+
marker.toggleAttribute("data-active");
36+
console.log("Activated", marker.id);
37+
38+
// Triggers
39+
document.querySelectorAll(".textbox").forEach(function(textbox) { textbox.style.opacity = 1; });
40+
41+
}
42+
}
43+
// ---
44+
else {
45+
if (marker.hasAttribute("data-active")) {
46+
47+
// Checks
48+
marker.toggleAttribute("data-active");
49+
console.log("De-activated", marker.id);
50+
51+
// Triggers
52+
document.querySelectorAll(".textbox").forEach(function(textbox) { textbox.style.opacity = 0; });
53+
54+
}
55+
}
56+
}
57+
58+
let observer = new IntersectionObserver(entries => {
59+
entries.forEach(entry => {
60+
entry.target.toggleAttribute("data-visible", entry.isIntersecting);
61+
});
62+
});
63+
64+
document.querySelectorAll(".marker").forEach(element => observer.observe(element));
65+
66+
document.getElementById("entrance").addEventListener("click", function() {
67+
window.location.href = "binnenkant.html";
68+
});
69+
70+
// code om mobile klikbaar te maken
71+
72+
// panzoom(document.getElementById('entrance-info'), {
73+
// onTouch: function(e) {
74+
// // `e` - is current touch event.
75+
76+
// return false; // tells the library to not preventDefault.
77+
// }
78+
// });
79+
80+
// document.getElementById("entrance-info").addEventListener("click", function() {
81+
// window.location.href = "binnenkant.html";
82+
// });

‎style.css

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,85 @@ html {
44
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
55
/* box-sizing: border-box; */
66
}
7-
body {
8-
width: 100%;
7+
#image-container {
8+
position: relative;
9+
width: 100vw;
910
height: 100vh;
1011
}
11-
/* ================================================================= */
12-
img {
13-
width: 600%;
12+
/* =====- Zoomable areas and popups -=========================================================== */
13+
.marker {
14+
position: absolute;
15+
background-color: grey;
16+
opacity: 0.5;
17+
}
18+
.marker[data-visible] {
1419
border: 1px solid red;
15-
}
20+
transition: 0.3s ease-in-out; /* Added transition for smoother color changes */
21+
}
22+
.marker[data-active] {
23+
border: 1px solid green;
24+
}
25+
.textbox {
26+
background-color: white;
27+
padding: 5px;
28+
position: absolute;
29+
font-size: 9px;
30+
max-width: 90px;
31+
/* border-radius: 60% 40% 40% 20% / 70% 50% 30% 25%; */
32+
border-radius: 15px;
33+
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
34+
font-family: cursive;
35+
opacity: 0;
36+
transition: opacity 0.5s ease-in-out;
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: center;
40+
flex-flow: column;
41+
margin: auto;
42+
}
43+
/* ===- Markers -=== */
44+
#magnetron {
45+
left: 900px;
46+
top: 320px;
47+
width: 50px;
48+
height: 100px;
49+
}
50+
#entrance {
51+
left: 940px;
52+
top: 570px;
53+
width: 50px;
54+
height: 120px;
55+
}
56+
#entrance-info {
57+
left: 950px;
58+
top: 580px;
59+
}
60+
#entrance-info img {
61+
width: 2em;
62+
height: auto;
63+
}
64+
65+
#magnetron-janinfo {
66+
left: 900px;
67+
top: 260px;
68+
opacity: 0; /* Initially set to 0 for invisibility */
69+
transition: opacity 0.5s ease-in-out;
70+
}
71+
#magnetron-extrainfo {
72+
left: 900px;
73+
top: 420px;
74+
opacity: 0;
75+
transition: opacity 0.5s ease-in-out;
76+
}
77+
/* ===- Backlog -=== */
78+
79+
/* .textbox:before {
80+
content: "";
81+
position:absolute;
82+
top:-40px;
83+
left:0;
84+
height:40px;
85+
width: 40px;
86+
border-bottom-left-radius: 50%;
87+
box-shadow: 0 20px 0 0 white;
88+
} */

0 commit comments

Comments
 (0)