• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Stufenweise in Bild rein zoomen mit + - Taste

M

Mai

Neues Mitglied
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.


Könnt Ihr mir bitte ein bisschen helfen? Ich verzweifle langsam daran.

Schonmal vielen Dank für jegliche Tipps! :)
 
Werbung:
PHP wird hierfür ncht benötigt. Javascript wird eine der Lösungen sein. Mach einfach einen event-listener, der den Keypress dieser Tasten abfängt. Dann setzt du den aktuellen Zoom in eine Variable, die dann immer erhöht und erniedrigt wird.

Mir fällt auch noch eventuell eine pure CSS-Lösung ein, aber dazu poste ich spöter was. Bin gerade auf dem Sprung.
 
  • Like
Reaktionen: Mai
Werbung:
Hi,

danke für die Anregungen :)

Mit Mausrad oder so, möchte ich absichtlich nicht. Ablauf ist so, das der Benutzer das Bild einmal recht fein einstellen muss (leider), und nach dem einstellen, dann wohl doch paar Minuten länger mit dem Bild verbringt. Würde er es dabei ständig versehentlich vergrößern/verkleinern, dann wäre der Benutzer sicher schnell verärgert.

Inzwischen habe ich einen lauffähigen Code.
Könnt ihr mal bitte drüber schauen? Ich habe bedenken das es bei anderen Browsern oder am Handy/Tablet, zu Kompatibilitätsproblemen kommen könnte.

Danke schon mal :)


Ach ja, Diese allerersten 3 Zeilen, sollte ich die lieber in ein <form> rein machen, oder ist es auch OK wenn die so direkt im HTML stehen?

PHP: 
<label>Zoom: <output id="zoom_output"></output></label>
<button type="button" id="zoom_btn_in">Zoom +</button>  <button type="button" id="zoom_btn_out">Zoom -</button>
<img src="../images/bild.png" width="200" height="200" id="zoom_img">


<script>
var zoom_output;              // Textausgabe der Aktuellen Zoom-Stufe in %
var zoom_img;                 // Variable auf das  <img> Element
var zoom_state = 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'

function zoom_func_in() {
  zoom_state = zoom_state + zoom_step;
  if (zoom_state > 150) {
    zoom_state = 150;
  }
  zoom_func_exec();
}

function zoom_func_out() {
  zoom_state = zoom_state - zoom_step;
  if (zoom_state < 50) {
    zoom_state = 50;
  }
  zoom_func_exec();
}

function zoom_func_exec() {
  cookie_write("zoom_state", zoom_state, 1000*60*60*24*365);    // Cookie Verfällt in 365 Tagen
  zoom_output.value = zoom_state + "%";
  var zoom_faktor = zoom_state / 100;

  // Zoom um das Zentrum des Bildes
  //var zoom_string = "scale(" + zoom_faktor + "," + zoom_faktor + ")";
  //zoom_img.style.WebkitTransform = zoom_string;
  //zoom_img.style.msTransform = zoom_string;
  //zoom_img.style.transform = zoom_string;

  // Zoom von links-oben des Bildes
  zoom_img.style.width = img_startsize_w * zoom_faktor;
  zoom_img.style.height = img_startsize_h * zoom_faktor;
}

function cookie_write(name, wert, expire_msec)
{
  var a = new Date();
  a = new Date(a.getTime() + expire_msec);
  document.cookie = name+'='+wert+'; expires='+a.toGMTString()+';';
}

function cookie_read(name)
{
  var a = document.cookie;
  var res = '';
  while(a != '')
  {
    while(a.substr(0,1) == ' '){a = a.substr(1,a.length);}
    var cookiename = a.substring(0,a.indexOf('='));
    if(a.indexOf(';') != -1) {
      cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));
    } else {
      cookiewert = a.substr(a.indexOf('=')+1,a.length);
    }
    if (name == cookiename) {
      res = cookiewert;
    }
    var i = a.indexOf(';')+1;
    if (i == 0) {
      i = a.length
    }
    a = a.substring(i,a.length);
  }
  return(res)
}

function cookie_del(name)
{
  document.cookie = name+'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}

window.onload = function() {
  if (document.cookie) {
    zoom_state = parseInt(cookie_read("zoom_state"));
    if (zoom_state == '') {
      zoom_state = 100;
    }
  }
  document.getElementById("zoom_btn_in").onclick = zoom_func_in;
  document.getElementById("zoom_btn_out").onclick = zoom_func_out;
  zoom_output = document.getElementById("zoom_output");
  zoom_img = document.getElementById("zoom_img");
  zoom_func_exec();
};
</script>
 
Zuletzt bearbeitet:
Online bekomme ich es nicht zum laufen :-(
In meiner lokalen HTML läuft es super.
Online habe ich eine Drupal Seite. Da läuft es nicht.


Den HTML Teil habe ich in Drupal als 'Full HTML' in einen node rein.
Den <script> Teil bekomme ich rein per 'page--node--17.tpl.php'.

1. Problem war dann schon mal, das im javascript das cookie Zeug nicht läuft. Also habe ich das wieder raus gelöscht.

2. Problem dann, diese 2 Zeilen haben keinerlei wirkung:
zoom_img.style.width = img_startsize_w * zoom_faktor;
zoom_img.style.height = img_startsize_h * zoom_faktor;

Die Zoom-Prozenz-Anzeige funktioniert jedoch.

Nehme ich den Kommentar dann raus bei den Zeilen:
//var zoom_string = "scale(" + zoom_faktor + "," + zoom_faktor + ")";
//zoom_img.style.WebkitTransform = zoom_string;
//zoom_img.style.msTransform = zoom_string;
//zoom_img.style.transform = zoom_string;
Dann funktionieren diese Zeilen wie erwartet. Das Bild zoomt.
Jedoch weil der Zoom dann über das Zentrum kommt, wandert mir das Bild aus dem Bildschirm.
Ich brauche es unbedingt, das die linke obere Ecke des Bildes, immer an der gleichen Stelle bleibt.

:-(
 
Zuletzt bearbeitet:
Werbung:
Omg!! 4 Stunden.... und woran lag es ?!?
In drupal muss noch ein + "px" dazu.
Für Drupal also:
zoom_img.style.width = (img_startsize_w * zoom_faktor) + "px";
zoom_img.style.height = (img_startsize_h * zoom_faktor) + "px";


Jetzt ist nurnoch die Frage, warum läuft bei Drupal der Cookie-Code nicht.
Im Firefox sehe ich dass das Cookie gespeichert wurde. Jedoch anstelle der Zoom-Zahl z.B. '100', wird 'NaN' gespeichert.
 
Mai schrieb:
m Firefox sehe ich dass das Cookie gespeichert wurde. Jedoch anstelle der Zoom-Zahl z.B. '100', wird 'NaN' gespeichert.
Zum Vergrößern anklicken....

NaN bedeutet, dass ein Wert vom Type number erwartet, aber nicht geliefert wurde. '100' ist ein String.

Warum machst du es dir eigentlich so schwer? Anstelle von Cookies gibt es doch den LocalStorage. Dort lassen sich einfache Key-Value-Pairs ablegen, was für deine Zwecke wahrscheinlich reicht, und alternativ dazu die Values auch als stringified Objekte übergeben.
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben