Image Resize mit Cursor

[Rudi]

Hallo,

bin auf der Suche nach dieser Geschichte:

http://jsfiddle.net/yYYw2/8/

Hat da zur Vergrößerung/Verkleinerung konkret von Bildern jemand einen Link für mich? Vielen Dank!!

[Martin Rettberg]

Hi,

was genau verstehst du denn an dem von dir verlinktem Beispiel nicht?
Das Bild erhält beim Laden der Seite einen Handler für mousedown, welcher sogleich dafür sorgt, dass der Browser sein normales Verhalten für dieses Event aufgibt und die aktuelle X-Koordinate der Maus innerhalb der Seite an die Variable x weitergibt.
Zum Schluß wird in dieser Callback-Funktion noch ein neuer Event-Handler für das mousemove Event registriert, diesmal aber für das body-Element.
Dieser Handler bekommt als Callback die Funktion resize, in welcher nun der ganze Spaß abläuft.
Hier wird der Variablen img erstmal das jQuery-Objekt für das Bild und anschließend die Differenz der X-Koordinate der Maus mit der aktuellen Position ermittelt und in der Variablen x_diff gespeichert.
Nun ist natürlich noch interessant, wie breit das Bild aktuell ist, damit es entsprechend verbreitert werden kann.
Dies geschieht innerhalb der Variablendeklaration für x_current - parseInt sorgt dafür, dass der String, der von img.css("width") zurückgegeben wird, auch eine Nummer ist.
Da besagter String noch irgendeine Einheit enthält, muss diese natürlich entfernt werden, was von der Funktion str_replace übernommen wird.
Die neue Breite x_new ergibt sich dann aus der Addition von x_diff und x_current und wird anschließend dem Bild als CSS-Eigenschaft übergeben.
Damit auch wir Menschen sehen können, wie breit das Bild jetzt ist, bekommt das readonly-Textfeld hinter "Breite:" ebenfalls den Wert von x_new.
Nun muss x natürlich noch die aktuelle Position der Maus kriegen, da sonst beim nächsten Aufruf der Funktion resize (welche solange aufgerufen wird wie sich die Maus innerhalb von body bewegt und der Handler noch aktiv ist) keine Differenz mehr berechnet werden kann.
Lassen wir die Maus jetzt endlich los und zerstören den Event-Handler für mousemove, denn am Samstag morgen will doch niemand so viel rechnen müssen - auch CPUs nicht!

Martin

[Rudi]

Vielen Dank für Deine Antwort!

Ich sag's mal so: Ich baue die einzelnen Bausteine ein, bekomme aber nicht das funktionierende Ergebnis.
Woher weiß ich denn, welche JQuery-Version, JQuery UI etc. in den Head-Bereich einbauen muss?

Vielen Dank!

[Martin Rettberg]

Hi,

Woher weiß ich denn, welche JQuery-Version, JQuery UI etc. in den Head-Bereich einbauen muss?

ich habe bisher ehrlich gesagt noch überhaupt nichts mit jQuery gemacht, aber in der offiziellen API steht, soweit ich das überschauen kann, immer dabei in welcher Version die Methode hinzugefügt wurde ("version added:" in den blauen Balken)!
Diese Version musst du dann also mindestens haben.

Martin