Stufenweise in Bild rein zoomen mit Plus MinusTaste
Hallo,
seit 8 Uhr, ja seit rund 9 Stunden, versuche ich es. Doch es will einfach nicht funktionieren.
Auf einer ansonsten statischen Seite, möchte ich ein Bild (png oder jpg) haben und 2 Buttons mit '+' und '-' Zoom-Funktion. Diese Seite wird einmalig per Hand gebastelt und daher muss es keine Lösung sein die sich schnell für weiter Bilder umsetzen lässt. PHP ist möglich und mit CSS komme ich soweit auch klar.
Wenn man auf den '+' Knopf drückt, dann soll um eine Stufe in das Bild rein gezoomt werde. Beim Drücken auf '-', soll wieder um eine Stufe raus gezoomt werden.
Ich stelle mir so etwa 50 Zoom-Stufen vor. Man soll also recht fein gestuft und langsam rein/raus zoomen können. z.B. 1% oder 0,5% Änderung je Klick.
Toll wäre es, wenn auch eine Zahl angezeigt wird, um die aktuelle Zoom-Stufe ablesen zu können. Damit wenn der Benutzer später wieder die Seite aufruft, er gezielt wieder diese Zoom-Stufe einstellen kann.
Oder, was super wäre. Doch ich denke das ist wohl zu kompliziert und schwer.... wenn in einem cookie beim Benutzer, die Zoom-Stufe gespeichert wird bei jedem drücken auf '+' oder '-'. Und wenn der Benutzer wieder die Seite aufruft, automatisch dadurch wieder die zuletzt eingestellte Zoom-Stufe dem Benutzer angezeigt wird.
Der hier verwendete Code
<html>
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
body{
width:100%;
height:auto;
}
#div1{
text-align:center;
margin-left:0;
margin-right:0;
width:500px;
height:auto;
}
button{
text-align:center;
margin-left:0;
margin-right:0;
}
</style>
</head>
<body>
<div id="div1">
<img src="/image/avatar_user4825_1577104569.jpg" width="200" height="200" id="zoom_img"></div>
<br>
<div>
Zoom: <output id="zoom_output"></output>
<button type="button" id="zoom_btn_in">Zoom +</button> <button type="button" id="zoom_btn_out">Zoom -</button> </div>
<script>
var zoom_state11 = 100; // 100% Zoom bei 1. Seitenbesuch
var zoom_step = 5; // Änderung in Prozent je klick
var img_startsize_w = 200; // Wenn 100% Zoom, Größe des Bildes in Pixel...
var img_startsize_h = 200; // ...nur benötigt wenn 'Zoom von links-oben des Bildes'
zoom_state=localStorage.getItem("zoom100")
if(zoom_state=='undefined' || zoom_state=='NaN' || zoom_state==null){
a=zoom_state11;
localStorage.setItem('zoom100',a);
}
function zoom_func_in() {
var zoom_state=localStorage.getItem("zoom100");
var zoom_state = parseInt(zoom_state) + parseInt(zoom_step);
if (zoom_state > 250) {
var zoom_state = 250;
}
localStorage.setItem('zoom100',zoom_state);
zoom_func_exec();
}
function zoom_func_out() {
var zoom_state=localStorage.getItem("zoom100");
var zoom_state = zoom_state - zoom_step;
if (zoom_state < 10) {
var zoom_state = 10;
}
localStorage.setItem('zoom100',zoom_state);
zoom_func_exec();
}
function zoom_func_exec(zoom_state) {
zoom_state=localStorage.getItem("zoom100")
document.getElementById("zoom_output").value = zoom_state + "%";
var zoom_states=zoom_state/100;
document.getElementById("zoom_img").style.height = img_startsize_h * zoom_states+"px";
document.getElementById("zoom_img").style.width =img_startsize_w * zoom_states+"px";
}
document.getElementById("zoom_btn_in").onclick = zoom_func_in;
document.getElementById("zoom_btn_out").onclick = zoom_func_out;
zoom_func_exec();
</script>
</body>
</html>