Seite 1 von 1
jquery zoom animate stufenweise
Verfasst: 06.09.2012, 17:55
von ariane
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?
Verfasst:
von
SEO Consulting bei
ABAKUS Internet Marketing Erfahrung seit 2002
- persönliche Betreuung
- individuelle Beratung
- kompetente Umsetzung
Jetzt anfragen:
0511 / 300325-0.
Verfasst: 06.09.2012, 21:24
von mogli
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).
Verfasst: 07.09.2012, 08:13
von ariane
Hallo,
vielen vielen dank!!!
ich habe schon getestet und funktiniert einwandfrei!
jquery zoom out
Verfasst: 08.09.2012, 09:45
von ariane
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#