Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare
Thema: JavaScript - Bilder Zoom-Funktion ➧ Artikel anzeigen
- Jan ✶✶✶✶✶ schrieb am Mittwoch, den 8 September 2021 #1
- Ist es möglich das Skript so anzupassen, dass keine Scrollbalken angezeigt werden. Dafür den Zoomausschnitt mit der Maus via Drag verschieben kann?
- Jan ✶✶✶✶✶ schrieb am Mittwoch, den 8 September 2021 #2
- Danke für deine Rückmeldung.
Es müsste mit dem Handy auch funktionieren. Deshalb würde der Schiebregler sehr gut passen. Und dazu müsste man das Bild mit dem Finger verschieben können für den Gewünschten Ausschnitt.
- Jan ✶✶✶✶✶ schrieb am Mittwoch, den 8 September 2021 #3
- Habe hier mal was gebastelt :)
Etwa so würde ich mir das vorstellen.
Aber jetzt komme ich nicht weiter mit:
- Es sollte nicht möglich sein das Bild so zu verschieben, dass der Hintergrund sichtbar wird. Also eine Begrenzung.
- Durch das Zoomen ist das Bild nicht mehr überall Dragging bar.
Diesen Beitrag vollständig anzeigen
<!DOCTYPE html>
<html>
<head>
<title>Drag Multiple Images</title>
<link href="https://www.kirupa.com/ssi/newDesign/kirupa_html5.css" rel="stylesheet" type="text/css">
<style>
body {
margin: 20px;
}
#container {
width: 800px;
height: 450px;
background-color: #EEE;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
}
.item {
border-radius: 50%;
touch-action: none;
user-select: none;
position: relative;
}
.item img {
pointer-events: none;
}
.one {
width: 800px;
height: 450px;
top: 0px;
left: 0px;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}
h1 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="range" id="zoomer" value="1" min="1" max="10" step="0.1"
oninput="zoom(this.value)">
<div id="outerContainer">
<div id="container">
<div class="item one">
<img src="bild.jpg" width="800px" height="450px" id="img">
</div>
</div>
</div>
<script>
function zoom(z) {
document.getElementById("img").style.transform=" scale("+z+", "+z+")";
document.getElementById("img").style.width=(z*100)+"%";
}
var container = document.querySelector("#container");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>
- Werner schrieb am Mittwoch, den 8 September 2021 #4
- Ich habe das mal kurz getestet, ist noch sehr fehlerhaft ...
Sind die Bilder der Kamera so gut, dass man diese vergrößern kann?
Ich hatte zwar deine Website besucht (https:// ???) kann mich eigentlich nur an den Kran auf den Bildern erinnern 😀
Da gibt es auch andere Funktionen, die kein JavaScript benötigen:
» werner-zenk.de/css/bilder_zoom-funktion_mit_css.php
» werner-zenk.de/css/bild_vergroessern_mit_dem_checkbox_hack.php
- Jan ✶✶✶✶✶ schrieb am Mittwoch, den 8 September 2021 #5
- Die Bilder haben eine Auflösung von 2304x1296.
Dein Beispiel auf dieser Seite gefällt mir eigentlich gut. Nur der Scrollbar stört vom aussehen her. Und mit dem ausblenden vom Scrollbar funktionierts auf dem Desktop Browser nicht mit dem scrollen. Aber dafür auf dem Handy
😅
- Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 #6
- Habe hier nochmals etwas gemacht.
Leider funktioniert das dragging mit dem Natel nicht.
Evt. hilft diese Variante jemanden der mal danach sucht.
Diesen Beitrag vollständig anzeigen
<script>
function zoom(z) {
document.getElementById("img").style.transform=" scale("+z+", "+z+")";
document.getElementById("img").style.width=(z*100)+"%";
document.getElementById("img").style.height=(z*100)+"%";
}
</script>
<input type="range" style="width:800px;" id="zoomer" value="1" min="1" max="2" step="0.01"
oninput="zoom(this.value)">
<div class="scroll" style="width: 800px; height: 450px; overflow: hidden; cursor: pointer;">
<div style="width: 800px">
<img src="bild.jpg" width="800px" height="450px" id="img">
</div>
</div>
<script>
const slider = document.querySelector(".scroll");
let isDown = false;
let startX;
let startY;
let scrollLeft;
let scrollTop;
slider.addEventListener("mousedown", e => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mousedown", e => {
isDown = true;
slider.classList.add("active");
startY = e.pageY - slider.offsetTop;
scrollTop = slider.scrollTop;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = x - startX;
slider.scrollLeft = scrollLeft - walk;
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
e.preventDefault();
const y = e.pageY - slider.offsetTop;
const walk = y - startY;
slider.scrollTop = scrollTop - walk;
});
</script>
- Werner schrieb am Freitag, den 10 September 2021 #7
- Hallo Jan,
es wäre schön, wenn du die Quelle zu dem Script nennen würdest.
Da könnte ich mal selbst nachschauen was du mit:das dragging mit dem Natel
gemeint hast. Im Script wird die CSS-Klasse: "active" gesetzt.
Ansonsten funktioniert das Script wunderbar 👍
- Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 #8
- Quelle:
kevinsimper.github.io/yearl[…]-overview/
Hier funktioniert das dragging perfekt mit dem Desktop wie auch mit dem Natel.
Ich denke durch das verändern und zusammenfügen beider skripte habe ich was falsch gemacht.
Forum:
discourse.wicg.io/t/drag-to[…]sktop/3627
- Werner schrieb am Freitag, den 10 September 2021 #9
- Ich habe das Script etwas angepasst. Das Verhalten war im Firefox-Browser etwas anders, es musste: pointer-events: none; hinzugefügt werden, ansonsten "klebte" das Bild am Mauszeiger fest.
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<style>
.active {
cursor: move;
}
input[type="range"]#zoomer {
width: 750px;
vertical-align: middle;
}
div.scroll {
width: 800px;
height: 450px;
overflow: hidden;
}
img#img {
width: 800px;
height: 450px;
pointer-events: none;
}
</style>
<p>
<label>Zoom: <input type="range" id="zoomer" value="1" min="1" max="2" 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 scrollLeft;
let scrollTop;
slider.addEventListener("mousedown", e => {
if (document.getElementById("zoomer").value > 1) {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
startY = e.pageY - slider.offsetTop;
scrollTop = slider.scrollTop;
}
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
slider.scrollLeft = scrollLeft - (x - startX);
const y = e.pageY - slider.offsetTop;
slider.scrollTop = scrollTop - (y - startY);
});
</script>
- Jan ✶✶✶✶✶ schrieb am Freitag, den 10 September 2021 #10
- Noch das gleiche Problem...
Auf dem Desktop PC im Browser funktioniert alles tiptop.
Aber auf dem Natel (Chromebrowser) kann das Bild via touch nicht verschoben werden.
Aber das originale Script funktioniert auf dem Natel mit dem verschieben.
kevinsimper.github.io/yearl[…]-overview/