✔ Datics Slide Gallery v4

[beckersbesters]

Hallo zusammen,

ich habe mich mal ein wenig im Forum umgeschaut und Datics (Tobias Menzel) Seite mit Flash Experimenten gefunden.

EINFACH GENIAL!

Aber nun zu meiner Frage:

Wie bekommt man es hin das beim ct MovieClip (container) nur Breite und Höhe der
Maske als maximaler Weg für x und y genommen wird, denn sonst muss man
bei grossen Bildern ohne Ende klicken, ziehen, klicken, ziehen usw.?

Hier der AS-Code:

function startMove(dx, dy) {
	ct.onEnterFrame = function() {
		if (this._width > mask._width) this._x = _xmouse - dx;
		if (this._height > mask._height) this._y = _ymouse - dy;
		
		if (this._width > mask._width) {
			if (this._x < mask._width - this._width) this._x = mask._width - this._width;
			if (this._x > 4) this._x = 4;
		}
		
		if (this._height > mask._height) {
			if (this._y < mask._height - this._height) this._y = mask._height - this._height;
			if (this._y > 4) this._y = 4;
		}
		
		bg1._x = this._x - 2;
		bg1._y = this._y - 2;
	}
}

Wenn ich jetzt ins onEnterFrame

trace(this._width);
trace(mask._width);

setze, zeigt er mit die Größe des aktuellen Bildes und die aktuelle Größe der Maske, welche wiederrum dynamisch ist. Also müsste doch prinzipiell nur

var bildgroesse = this._width;
var maskengroesse = mask._width;
// Also sind maskengroesse und bildgroesse jeweils = 100%

prozentual gegeneinander gerechnet werden?

cu

 

[Tobias Menzel]

Hi,

ich habe nach Deinem Kommentar auf der Seite versucht, Dir per E-Mail zu antworten; leider kam die Mail als unzustellbar zurück. Daher hier mein Vorschlag:

Um die Maskengröße (Anzeigebereich) als maximale Breite für ein Bild festzulegen, füge folgende Zeilen am Anfang der Funktion "reScale" ein:

	if (ct._width > mask._width) {
		var r = ct._width / ct._height;
		ct._width = mask._width;
		ct._height = ct._width / r;
	}

Du könntest z.B. auch festlegen, dass das Bild maximal 1.5 mal so breit sein darf wie die Maske, indem Du dort jeweils "mask._width" mit "(mask._width * 1.5)" ersetzt.

Andererseits: Deine Aussage

Wie bekommt man es hin das beim ct MovieClip (container) nur Breite und Höhe der
Maske als maximaler Weg für x und y genommen wird, denn sonst muss man
bei grossen Bildern ohne Ende klicken, ziehen, klicken, ziehen usw.?

ist ein wenig missverständlich - wahrscheinlich meinst Du etwas anderes? Soll das Bild weiterhin in Originalgröße angezeigt werden, und sich nur das Verhalten beim Verschieben ändern? In dem Fall bitte ich Dich, Deine Aussage zu präsisieren.

Gruß
.

 

[beckersbesters]

Hi,

danke, aber wir haben uns missverstanden.

Auf http://www.hugoboss.com/ unter --> BOSS Orange --> Menswear --> Schuhe --> "auf ein Schuh klicken" --> ganz rechts gibt es dann das Bild mit ähnlicher Funktion wie bei der Slide Gallery. Wie können wir das implementieren?

cu

 

[Tobias Menzel]

Hi,

jetzt habe ich Dich verstanden. ^^

Ändere die Funktion "startMove" folgendermaßen ab:

function startMove() {
	ct.onEnterFrame = function() {
		if (this._width > mask._width) {
			var px = _xmouse * 120 / mask._width - 10;
			var dtx = px * (mask._width - this._width) / 100;
			this._x += (dtx - this._x) / 8;
			if (this._x < mask._width - this._width) this._x = mask._width - this._width;
			if (this._x > 4) this._x = 4;
		}
		if (this._height > mask._height) {
			var py = _ymouse * 120 / mask._height - 10;
			var dty = py * (mask._height - this._height) / 100;
			this._y += (dty - this._y) / 8;
			if (this._y < mask._height - this._height) this._y = mask._height - this._height;
			if (this._y > 4) this._y = 4;
		}
		bg1._x = this._x - 2;
		bg1._y = this._y - 2;
	}
}

Ändere dann die Ereignishandler so ab, dass "startMove" auf ein rollOver reagiert:

function initListeners() {
	if (ct._width > mask._width || ct._height > mask._height) {
		ct.onRollOver = function() {
			showHc();
			bg1.fadeTo(150, 1.5);
			startMove();
		}
		ct.onRollOut = function() {
			hideHc();
			bg1.fadeTo(0, 2);
			stopMove();
		}
		ct.onPress = function() {
			bg1.fadeTo(150, 1.5);
		}
		ct.onRelease = function() {
			bg1.fadeTo(0, 2);
		}
		ct.onReleaseOutside = function() {
			hideHc();
			stopMove();
			bg1.fadeTo(0, 2);
		}
	}
}

Gruß
.

 

[beckersbesters]

Hi,

perfekt. Also man muss sagen du hast es einfach drauf.

Vielen Dank.

cu