diff --git a/APPL/PDA/plattegrond.asp b/APPL/PDA/plattegrond.asp
index 84e1eb1d2e..9e4a566c4d 100644
--- a/APPL/PDA/plattegrond.asp
+++ b/APPL/PDA/plattegrond.asp
@@ -105,7 +105,7 @@ imgurl += "&sizeY=" + (1*sizeY);
<% FCLTMHeader.Generate({}); %>
-
+
<%
diff --git a/APPL/PDA/res_plattegrond.asp b/APPL/PDA/res_plattegrond.asp
index 4d479ba6e5..ac991bbbed 100644
--- a/APPL/PDA/res_plattegrond.asp
+++ b/APPL/PDA/res_plattegrond.asp
@@ -101,6 +101,105 @@ imgurl += "&sizeY=" + (1*sizeY);
$(this).parent().scrollLeft(($(this).width() - $(this).parent().width()) / 2);
$(this).parent().scrollTop(($(this).height() - $(this).parent().height()) / 2);
}) // JGL: Waarom? .load();
+
+ var img = document.getElementById('plattegrond-img');
+ var container = document.getElementById('mobplan');
+ var scale = 1, posX = 0, posY = 0, lastX = 0, lastY = 0, startX = 0, startY = 0, dragging = false;
+
+ function clamp(val, min, max) {
+ return Math.max(min, Math.min(max, val));
+ }
+
+ function setTransform() {
+ var cw = container.clientWidth;
+ var ch = container.clientHeight;
+
+ // Compute pan bounds based on container size & scale
+ var minX = -(cw * scale - cw) / 2;
+ var maxX = (cw * scale - cw) / 2;
+ var minY = -(ch * scale - ch) / 2;
+ var maxY = (ch * scale - ch) / 2;
+
+ posX = clamp(posX, minX, maxX);
+ posY = clamp(posY, minY, maxY);
+
+ lastX = posX;
+ lastY = posY;
+
+ img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
+ }
+
+ img.addEventListener('load', function() {
+ scale = 1;
+ posX = 0;
+ posY = 0;
+ lastX = 0;
+ lastY = 0;
+ setTransform();
+ });
+
+ img.addEventListener('touchstart', function(e) {
+ if (e.touches.length === 1) {
+ dragging = true;
+ startX = e.touches[0].clientX - lastX;
+ startY = e.touches[0].clientY - lastY;
+ }
+ });
+
+ img.addEventListener('touchmove', function(e) {
+ if (e.touches.length === 1 && dragging) {
+ e.preventDefault();
+ posX = e.touches[0].clientX - startX;
+ posY = e.touches[0].clientY - startY;
+ setTransform();
+ } else if (e.touches.length === 2) {
+ e.preventDefault();
+ dragging = false;
+ var dx = e.touches[0].clientX - e.touches[1].clientX;
+ var dy = e.touches[0].clientY - e.touches[1].clientY;
+ var dist = Math.sqrt(dx*dx + dy*dy);
+
+ if (!img._startDist) {
+ img._startDist = dist;
+ img._startScale = scale;
+ } else {
+ var newScale = img._startScale * (dist / img._startDist);
+ scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
+ setTransform();
+ }
+ }
+ }, { passive: false });
+
+ img.addEventListener('touchend', function(e) {
+ dragging = false;
+ img._startDist = null;
+ img._startScale = scale;
+ lastX = posX;
+ lastY = posY;
+ });
+
+ // Optional: double tap to reset
+ var lastTap = 0;
+ img.addEventListener('touchend', function(e) {
+ var now = new Date().getTime();
+ if (e.touches.length === 0 && now - lastTap < 300) {
+ scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
+ setTransform();
+ }
+ if (e.touches.length > 0) {
+ lastTap = 0;
+ } else {
+ lastTap = now;
+ }
+ });
+
+ // Mouse wheel zoom (desktop)
+ img.addEventListener('wheel', function(e) {
+ e.preventDefault();
+ var delta = e.deltaY < 0 ? 1.1 : 0.9;
+ scale = Math.max(1, Math.min(scale * delta, 5));
+ setTransform();
+ });
});
function process_info(data)
{
@@ -131,7 +230,6 @@ imgurl += "&sizeY=" + (1*sizeY);
![<%=L(]()
" style="height:auto;display:block;margin:0 auto;" src="<%=safe.htmlattr(imgurl)%>" id="plattegrond-img">
<%
-
// En nu nog de legenda
if (thema_key != -1 || themaI_key != -1) {
@@ -245,7 +343,6 @@ imgurl += "&sizeY=" + (1*sizeY);
oRs.Close();
}
-
}
CONTENT_END();
FOOTER();
@@ -253,106 +350,4 @@ imgurl += "&sizeY=" + (1*sizeY);
PDA_PAGE_END(); %>
-<% ASPPAGE_END(); %>
-
+<% ASPPAGE_END(); %>
\ No newline at end of file