✔ Bild-Zoom in die "Mitte"

[String]

Huhu zusammen,

mir fehlt es gerade mal wieder ein bisschen an der Logik:

Ich habe ein DIV (500 x 500px). Und 5 Bilder.
1) 500 x 500
2) 800 x 800
3) 1200 x 1200
4) ....

Das erste Bild füllt den DIV also gang aus. Klicke ich auf eine "Lupe" wird das nächste Bild gelden, also das 800 x 800er. Und danach das 1200x1200 und genau da habe ich das Problem.

Lade ich das 800x800er, scrolle dies ein wenig zur Seite, also verschiebe es mittels Javascript und Zoome dann in das nächste Bild, schaffe ich es nicht, in die "Mitte" des DIVs zu zoomen. Ich habe jetzt schon 100.000 Varianten getestet, aber das Bild springt immer n bisschen nach links oder rechts, oder sonst irgendwas..

Hat da jemand etwas parat? Oder kann mir jemand ein Denkanstoß geben, wie ich das Lösen kann?

Beste Grüße

paD

 

[SpiceLab]

Hat da jemand etwas parat? Oder kann mir jemand ein Denkanstoß geben, wie ich das Lösen kann?

Ohne deinen verwendeten Scriptcode jemals gesehen zu haben, wohl kaum

 

[timestamp]

Du musst die obere linke Ecke (marginLeft für X und marginTop für Y) wie folgt verschieben:

X: (BreiteDesBilds - BreiteDesDivs) / -2;
Y: (HöheDesBilds - HöheDesDivs) / -2;

(Anmerkung: Geteilt durch -2 da das Bild ja nach links/oben verschoben werden muss, und das ist nunmal negativ im "BildschirmKoordinatensystem" )
Daher geht dann auch:

X: (BreiteDesDivs - BreiteDesBilds) / 2;
Y: (HöheDesDivs - HöheDesBilds) / 2;

Du kannst mit JS wie folgt auf die CSS Eigenschaft zugreifen:

document.getElementById('#beispiel').style.marginLeft = -100;
document.getElementById('#beispiel').style.marginTop = -100;

<div id="DivDerAußenRumIst">
<img id="beispiel" style="position: absolute" src="deinBild.jpg" />
</div>

 

[Quaese]

Hi,

bitte Einheiten nicht vergessen, z.B.

document.getElementById('#beispiel').style.marginLeft = -100 + "px";
document.getElementById('#beispiel').style.marginTop = -100 + "px";

Ciao
Quaese

 

[timestamp]

Danke Quaese, das hab ich um die Uhrzeit einfach vergessen.

 

[String]

Huhu,

danke für die Hilfe. Aber so zoomt er IMMER in die Mitte. Heißt, wenn ich bei 800x800 das Bild um 50px nach "links" also auf -50px schiebe sehe ich quasi den oberen linken abschnitt.
Zoome ich jetzt auf 1200x1200 zoomt er auf die Mitte.. und genau da komm ich nicht weiter.

Er soll halt dann den gezeigten Bereich (also die Mitte der 500x500) die ja einen Ausschnitt des 800x800er Bildes zeigt, vergrößern.

paD

 

[SpiceLab]

Wie wäre es, deinen Code zu zeigen, oder alternativ den Link zu nennen, damit wir im Bilde sind, wie du es überhaupt konkret umgesetzt hast?!

Eine weitere fröhliche Raterunde dürfte hier wohl kaum in deinem Interesse sein.

 

[String]

So geht's:

....
function getBX() {
	var bX = document.getElementById('bild').style.left;
	bX = bX.substring(0,bX.length - 2);
	return bX;
}
function getBY() {
	var bY = document.getElementById('bild').style.top;
	bY = bY.substring(0,bY.length - 2);
	return bY;
}
function zoomIn() {
	var faktor = getFaktor(zooms,zooms-1);
	var d = document.getElementById('bild');
	
	var bX = parseInt(getBX()) - (anzbr/2);
	bX = bX * faktor;
	bX = bX + (anzbr/2);
	var bY = parseInt(getBY()) - (anzho/2);
	bY = bY * faktor;
	bY = bY + (anzho/2);
	
	d.style.left = bX + 'px';
	d.style.top = bY + 'px';
	
	zooms = zooms-1;
	if(zooms<0) zooms = 0;
	setzteBild(ordner, bilder, zooms);
}
function getFaktor(z1,z2) {
	faktor = (zab[z2][0]/zab[z1][0]);	
	return faktor;
}

Zusammengefasst:
Ich berechne den Faktor um der das Bild größer / kleiner wird und verschiebe die Pixel von der Mitte des Bildes aus um den Faktor X weiter nach außen

Ich weiß zwar nicht, obs die eleganteste Lösung ist, aber sie läuft unter IE; FF; und Safari.

paD