jquery zoom animate stufenweise

Beitrag von **ariane** » 06.09.2012, 17:55

Hallo

ich arbeite seit tagen an eine zoomer einer landkarte.
Mein problem ist die berechnung von left und top für die jquery animate(left:xxx, topxx).
Wenn ich nur ein mal auf den zoomer klicke, wird das bild zentriert vergrössert (alles ok) ABER bein nächsten click wird das bild nicht mehr aus den mittelpunkt hearus gezoomt.

irgendwas mit den mittelpunkt ist falsch aber ich weiss nicht mehr... Am besten hier schauen:

https://www.todoweb.de/jquery/test.html

kann jemand mir bitte helfen?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **mogli** » 06.09.2012, 21:24

Ab dem zweiten Durchlauf entsteht der Fehler, weil du die aktuelle "top" und "left" Variable zusätzlich noch mit den Werten des vorherigen Durchlaufs kombinieren musst. Ist schwierig zu erklären, deswegen hier die nötigen Änderungen für deinen Code:

Außerhalb deiner Funktion folgende globale Variablen anlegen:

var top = 0;
var left = 0;

Innerhalb deiner Funktion folgende zwei Zeilen modifizieren:

top = ((oheight - nheight) / 2) + top;
left = ((owidth - nwidth) / 2) + left;

Dann funktioniert alles korrekt (hab es lokal bei mir getestet).

Beitrag von **ariane** » 07.09.2012, 08:13

Hallo,
vielen vielen dank!!!

ich habe schon getestet und funktiniert einwandfrei!

Beitrag von **ariane** » 08.09.2012, 09:45

ich habe jetzt ein button zum zoomout gebaut und ich habe auch bei zoomin ab eine bestimmte image-grösse das bild automatisch getauscht.
Mein Problem ist das damit mein zoomout nicht funktioniert.
ich weiss nicht wie ich das zoom out realisieren soll?
habe folgendes gebaut aber leider funktioniert nicht:

zoutH = nheight - oheight;
zoutW = nwidth - owidth;
topn = ((oheight+ zoutH) / 2);
leftn = ((owidth + zoutW) / 2);
$('.zoom img').stop().animate({
'height' : '-='+zoutH+'px',
'width' : '-='+zoutW+'px',
'left':'-='+ leftn+'px',
top: '-='+topn+'px'}, 100);
});

Falls jemand mir helfen kann, hier zum anschauen:
https://www.todoweb.de/jquery/test.html#