InternInhaltsverzeichnisGlossarBausteineLinklisteTutorialsKommentare
Thema: JavaScript - Bilder Zoom-Funktion

👤 Werner schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #11
Hier noch eine Änderung, keine Ahnung, ob das dann auf deinem Handy funktioniert:

Diesen Beitrag vollständig anzeigen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<style>
.active {
 cursor: move;
}

input[type="range"]#zoomer {
 width: 450px;
 vertical-align: middle;
}

div.scroll {
 width: 500px;
 height: 400px;
 overflow: hidden;
}

img#img {
 width: 500px;
 height: 400px;
 pointer-events: none;
 user-select: none;
}
</style>

<p>
  <label>Zoom: <input type="range" id="zoomer" value="1" min="1" max="2.5" step="0.01"></label>
</p>

<div class="scroll">
 <img src="m.jpg" id="img" alt="">
</div>

<script>
document.getElementById("zoomer").addEventListener("input", e => {
 var z = e.target.value;
 var img = document.getElementById("img");
 img.style.transform = " scale(" + z + ", " + z + ")";
 img.style.width = (z * 100) + "%";
 img.style.height = (z * 100 ) + "%";
});

const slider = document.querySelector(".scroll");
let isDown = false;
let startX;
let startY;
let scrolllLeft;
let scrolllTop;

slider.addEventListener("pointerdown", e => {
 if (document.getElementById("zoomer").value > 1) {
  isDown = true;
  slider.classList.add("active");
  startX = e.pageX - slider.offsetLeft;
  scrolllLeft = slider.scrollLeft;
  startY = e.pageY - slider.offsetTop;
  scrolllTop = slider.scrollTop;
 }
});

slider.addEventListener("pointerleave", () => {
 isDown = false;
 slider.classList.remove("active");
});

slider.addEventListener("pointerup", () => {
 isDown = false;
 slider.classList.remove("active");
});

slider.addEventListener("pointermove", e => {
 if (!isDown) return;
 e.preventDefault();
 var x = e.pageX - slider.offsetLeft;
 slider.scrollLeft = scrolllLeft - (x - startX);
 var y = e.pageY - slider.offsetTop;
 slider.scrollTop = scrolllTop - (y - startY);
});
</script>

Vielleicht noch den Cache im Browser löschen!
👤 Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #12
Jetzt funktioniert es fast.
Desktop wieder perfekt.
Und mit dem Natel kann man ganz wenig das Bild verschieben. Würde schätzen pro Versuch verschiebt sich das Bild um ca 5-10px.
Mit einem Bild von über 2000px ist das nicht so der Hit 🙂

Übrigens vielen Dank dass du schon wieder so viel Geduld zeigst.
👤 Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #13
Ich könnte mir vorstellen dass das Problem davon kommt das er beim Touch auf das Display nur kurz das Skript startet und gleich wieder stopt. Mit der Maus funktionierts. Kann man da was machen das er erkennt das man es via touch und nicht mousedown bedient?
👤 Werner schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #14
Deswegen habe ich anstatt "mousedown" "pointerdown" verwendet:

mousedown = pointerdown
mouseup = pointerup
mouseleave = pointerleave
mousemove = pointermove

Ich kann das leider nicht selbst am Handy testen, muss mir zuerst ein neues kaufen!
👤 Jan Kuster ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #15
Ok, danke...
Somit lese ich mal was ich sonst noch finde.
👤 Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #16
Hilft dir dieser Link um das Skript anzupassen?
mediaevent.de/javascrip[…]vents.html
👤 Werner schrieb am Freitag, den 10 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #17
Ich habe inzwischen eine andere (einfachere) Lösung für das erste Beispiel gefunden.
Für Chromium und Webkit-Browser, und den Firefox

<style>
div#border {
width: 450px;
height: 350px;
overflow: auto;
margin-top: 5px;
scrollbar-width: thin;
scrollbar-color: #AAA;
}

div#border::-webkit-scrollbar {
width: 5px;
height: 5px;
}

div#border::-webkit-scrollbar-thumb {
background: #AAA;
}
...
👤 Jan ✶✶✶✶✶ schrieb am Sonntag, den 12 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #18
Habe hier noch ein Skript mit einem Beispiel gefunden.
wiki.selfhtml.org/wiki/Java[…]g_and_Drop
Dieses Skript funktioniert auf dem Natel via touch und Maus(klick) perfekt. Nur weiss ich nicht wie ich das Skript anpasse dass es mit deiner Zoom Funktion klappt. Und das mit einem Bild.
👤 Werner schrieb am Mittwoch, den 15 September 2021 zum Thema: JavaScript - Bilder Zoom-Funktion #19
Ich habe die Lösung gefunden, und zwar ohne JavaScript zu verwenden.
Am Smartphone funktioniert es wunderbar und schmale Bildlaufleisten werden auch angezeigt.

<style>
div#border {
width: 450px;
height: 350px;
overflow: auto;
overscroll-behavior: Contain;
margin-top: 5px;
scrollbar-width: thin;
scrollbar-color: #AAA;
}