Slider Elemente animieren

[dirksche]

Hallo liebe Contao Community,

hat schon jemand Erfahrung im anpassen des Scripts sammeln können?
Ich würde gerne die Elemente in meinem Slider animieren... so wie in diesesm Beispiel:

http://coolcarousels.frebsite.nl/c/27/

Wenn ich in Contao das js_caroufredsel Template mit dem Script aus dem Demo ersetze, funktioniert es leider nicht.
Hat jemand einen Vorschlag?

LG,
Dirk

[Dirch]

Wenn ich in Contao das js_caroufredsel Template mit dem Script aus dem Demo ersetze, funktioniert es leider nicht.
Hat jemand einen Vorschlag?

Hey Dirk,

ich weiß nicht genau was du tatsächlich gemacht hast, aber ersetzen ist nicht der richtige Weg. Einpassen wäre besser. Wenn du keinen Wert darauf legst, die Einstellungen im Backend machen zu können, kannst du den meisten Teil des PHP-Codes rausschmeißen. Wichtig beizubehalten ist jedoch der Teil, der die Element-Namen generiert und der Start des Scripts sonst paßt es mit den Templates, die den Wrapper-Code ausgeben nicht mehr zusammen. Wenn du die Einstellungs-Möglichkeit beibehalten willst, dann mußt du die callback-Funktionen an den entsprechenden Stellen anpassen. Sie sind alle auskommentiert im Script enthalten. So wie ich das sehe hat er lediglich bei den Buttons solche hinterlegt. Damit es aber auch generell funktioniert muß die Kombination aus JavaScript und HTML-Code passen. Das Beispiel würde in Contao also nur dann funktionieren, wenn der HTML-Code der Slider-Elemente gleich wäre. Er sucht in den Funktionen ja nach bestimmten CSS-Klassen.

Zusammengefaßt: essentiell ist der Anfang des Templates (Script-Start und Slider-ID) und das Ende (Wrapper-Element). Wichtig sind sonst nur noch die IDs für die Bedien-Elemente (wenn man sie braucht).

Grüße...
...Dirk

[dirksche]

Hi Dirk,

danke für den Tipp. Ich bin gestern noch eine eine andere interessante Möglichkeit gestossen, um die Elemente im Slider zu animieren.

http://daneden.me/animate/

Finde ich eine superschnelle einfache Lösung um die Elemente einfach via CSS Klassenzuweisung zu bewegen. Leider stehe ich da vor einem anderen Problem... die CSS3 Keyframe Animationen werden natürlich auch in den Slider Elementen ausgeführt, die noch nicht zu sehen sind. Du kennst nicht rein zufällig eine Möglichkeit, via Javascript die Kenyframe Animation zu reseten? Denkbar wäre das bei einem Klick auf den Preview oder Next Button.

Gruß,
Dirk ;-)

[Dirch]

Du kennst nicht rein zufällig eine Möglichkeit, via Javascript die Kenyframe Animation zu reseten? Denkbar wäre das bei einem Klick auf den Preview oder Next Button.

In JS bin ich noch nicht so bewandert, aber du könntest es vielleicht mit einem Kniff lösen. Wenn du den sichtbaren Elementen in den Callback-Funktionen z.B. eine Klasse visible zuordnest und nach dem Scrollen die Klasse wieder entfernst und nur diese per css animieren läßt.

im globalen Bereich:

onCreate: function(data) { data.items.addClass("visible"); } 

Im scroll Bereich:

onBefore: function(data) { data.items.old.removeClass("visible"); }
onAfter: function(data) { data.items.visible.addClass("visible"); } 

Das setzt entsprechend bei den sichtbaren Elementen diese Klasse hinzu und entfernt sie.

Grüße...
...Dirk

[dirksche]

Dein Kniff klingt logisch. Mir ist nur noch nicht ganz klar, wo ich diese Zeilen einfügen soll.
Du meinst doch sicher das js_caroufredsel Template, oder?
Dort gibt es ja die kommentierten Bereiche "Global Options" und "Scroll Options".

Ich denke aber, im allgemeinen wäre es für einige Nutzer interessant, wenn die sichtbaren Elemente automatisch z.B. die Klasse "visible" hätten.
Wäre doch ein schönes Feature für das nächste Update ;-)

LG,
Dirk

[Dirch]

Dein Kniff klingt logisch. Mir ist nur noch nicht ganz klar, wo ich diese Zeilen einfügen soll.
Du meinst doch sicher das js_caroufredsel Template, oder?
Dort gibt es ja die kommentierten Bereiche "Global Options" und "Scroll Options".

Ich denke aber, im allgemeinen wäre es für einige Nutzer interessant, wenn die sichtbaren Elemente automatisch z.B. die Klasse "visible" hätten.
Wäre doch ein schönes Feature für das nächste Update ;-)

LG,
Dirk

ja genau in dem js_template und dort bei dem entsprechenden Kommentar in dem jeweiligen Bereich. Auskommentieren und dann da diesen Code hinterlegen bei der Funktion (onCreate, ...).

Ich hab die Code-Schnipsel aus meiner lokalen Entwicklungs-Version. Ich bin mir nur noch nicht sicher, ob ich es visible oder active nenne. Da wollte ich noch schauen, wie das der Core macht. Ich glaube deshalb hatte ich auch active benutzt, wobei visible wohl logischer wäre...

[dirksche]

Ok, ich hab den Code angepasst.
Die Klasse wird auch im ersten Slider Element vergeben, doch beim Sliden zum nächsten Element verändert sie sich leider nicht. Das erste Element bleibt weiter "visible" und das zweite bekommt diese Klasse leider nicht mehr.

Die Globalen

	// global options
	if ($this->carouselType) {		
		echo ($oComma == true ? ', ' : '') . $this->carouselType;
		$oComma = true;
	}
	if ($this->responsive) {
		echo ($oComma == true ? ', ' : '') . $this->responsive;
		$oComma = true;
	}
	if ($this->direction) {
		echo ($oComma == true ? ', ' : '') . $this->direction;
		$oComma = true;
	}
	if ($this->width) {
		echo ($oComma == true ? ', ' : '') . $this->width;
		$oComma = true;
	}
	if ($this->height) {
		echo ($oComma == true ? ', ' : '') . $this->height;
		$oComma = true;
	}
	if ($this->align) {
		echo ($oComma == true ? ', ' : '') . $this->align;
		$oComma = true;
	}
	if ($this->padding) {
		echo ($oComma == true ? ', ' : '') . $this->padding;
		$oComma = true;
	}
	if ($this->cookie) {
		echo ($oComma == true ? ', ' : '') . $this->cookie;
		$oComma = true;
	}
        echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { data.items.addClass("visible"); }';

Und Scroll

	// subobject 'scroll' options
	if ($this->scrollItems || $this->scrollFx || $this->scrollEasing || $this->scrollDuration || $this->scrollPauseOnHover) {
		echo ($oComma == true ? ', ' : '') . 'scroll: { ';
		if ($this->scrollItems) {
			echo ($iComma == true ? ', ' : '') . $this->scrollItems;
			$iComma = true;
		}
		if ($this->scrollFx) {
			echo ($iComma == true ? ', ' : '') . $this->scrollFx;
			$iComma = true;
		}
		if ($this->scrollEasing) {
			echo ($iComma == true ? ', ' : '') . $this->scrollEasing;
			$iComma = true;
		}
		if ($this->scrollDuration) {
			echo ($iComma == true ? ', ' : '') . $this->scrollDuration;
			$iComma = true;
		}
		if ($this->scrollPauseOnHover) {
			echo ($iComma == true ? ', ' : '') . $this->scrollPauseOnHover;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
        echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible"); }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
		}
        echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible"); }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); }';
		}
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';

		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

[Dirch]

dein JS-Code stimmt da nicht. Du mußt schon schauen, daß das mit den Klammern und dem nachfolgenen Code nicht kollidiert:

echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible");';
if (!$this->autoPlay && $this->autoProgress == 'pie') {
    echo '$().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '");';
}
echo '}'; // end of 'onBefore' 

echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible");';
if (!$this->autoPlay && $this->autoProgress == 'pie') {
    echo '$().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' });';
}
echo '}'; // end of 'onAfter' 

[dirksche]

Also ich habe mir die Codezeilen nochmals kopiert und in mein Template eingefügt... leider ohne Erfolg. Die nachfolgenden Sliderelemente bekommen die Klasse nicht :-(
Ich bin leider auch kein PHP und JS Experte.
Ich hab Dir das komplette Template mal in den Anhang gelegt.

LG,
Dirk

[Dirch]

Mir würde helfen wenn du genauer sagst was nicht geht. Habe deinen Code angeschaut und gesehen, daß du nach dem onBefore das Flag für das "Komma" nicht setzt. Wahrscheinlich gab es einen JS-Fehler und deshalb ging es nicht. Am besten du schaust mit einem Tool dann immer auf die Seite. Du bekommst auch die Stelle und die JS-Fehlermeldung gesagt.

        echo '}'; // end of 'onBefore'
        $iComma = true; 

Das $iComma fehlt bei dir und ist der einzige sichtbare Unterschied zwischen deinem und meinem Code. Dieses iComma ist das Flag dafür, das jede Ausgabevariable prüft und ggf. ein , voranstellt. Die einzelnen Parameter werden durch ein Komma getrennt.

Grüße...
...Dirk

[Dirch]

Ich denke aber, im allgemeinen wäre es für einige Nutzer interessant, wenn die sichtbaren Elemente automatisch z.B. die Klasse "visible" hätten.
Wäre doch ein schönes Feature für das nächste Update ;-)

Eben ein kleines Update (Version 1.0.2) im ER eingestellt, das den sichtbaren Elementen die CSS-Klasse 'visible' spendiert.