Caroufredsel und die Pagination

[dirksche]

Hallo liebe Contao Community,

ich habe ein kleines Problemchen mit meinem Caroufredsel Slider.
Der Slider bietet ja die Möglichkeit eine Pagination einzublenden, welche mit den Zahlen 1,2,3 usw. dargestellt wird.
Nun würde ich aber statt der Zahlen eine Beschriftung im Sinne von Startseite, Produkte usw. bevorzugen. Wie und wo könnte ich das anpassen?

LG,
Dirk

[Dirch]

Hallo Dirk,

schau mal hier: http://caroufredsel.dev7studios.com/...-carousels.php und hier (4. Beispiel von unten): http://caroufredsel.dev7studios.com/...figuration.php

Du brauchst nur diese Methode "anchorBuilder" im js-Template anpassen bzw. zu hinterlegen und kannst dann dort die Pagination so zusammenbauen wie du das möchtest.

Viele Grüße...
...Dirk

[dirksche]

Hi Dirk,

perfekt... das hat schon mal gefunzt.
Der Code sieht bei mir nun so aus.

	// subobject 'pagination' options
	if ($this->pagination) {
		echo ($oComma == true ? ', ' : '') . 'pagination: { ';
		echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
		$iComma = true;
		if ($this->paginationKeys) {
			echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
			$iComma = true;
		}
        echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {
        var title = $(this).find( "h3" ).text();
        return "<span>" + title + "</span>";
        }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }'; // end of subobject 'pagination' options
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;

Nun werden die H3 Überschriften, welche im Slider angelegt sind in der Pagination als Beschriftung angezeigt.
Hast Du auch eine Idee, wie ich jedem Navigationspunkt eine CSS Klasse geben könnte?

Liebe Grüße,
Dirksche ;-)

[Dirch]

Nun werden die H3 Überschriften, welche im Slider angelegt sind in der Pagination als Beschriftung angezeigt.
Hast Du auch eine Idee, wie ich jedem Navigationspunkt eine CSS Klasse geben könnte?

klaro. Das ist leicht...

return "<span class="wasauchimmerichmag" id="wasauchimmerichmag_" + nr + ""'">" + title + "</span>"; 

Ich hab aber nicht darauf geachtet wie und welche Gänsefüßchen wann man wo benutzen muß. Ging mir nur ums Prinzip.

Liebe Grüße =)

[dirksche]

Kann ich auch die CSS Klasse meines Slider Elements in meine Pagination einfügen?

Es geht um folgendes:
Ich habe einen Slider mit 15 Elementen.
Nun möchte ich aber in meiner Pagination nur auf die Elemente 3, 7, 9, 12 und 15 verlinken.
Da ich jedem Element eine CSS Klasse gebe, könne ich diese ja auch an die Pagination Links "vererben".
Dann blende ich per CSS nur die Links ein, welche auch die Klassen der Slider Elemente 3, 7, 9, 12 und 15 besitzen.

Oder denke ich zu kompliziert? ;-)

[Dirch]

Könntest du so wohl machen aber schicker wäre es du gibst als return-Wert nur diejenigen Elemente zurück, die dem gerecht werden. Kannst dort ja mit jQuery nach Elementen suchen, die best. Kriterien erfüllen - also z.B. deine definierte Klasse haben. Die anderen ignorierst du. Dann enthält die Pagination auch nur die Elemente, die du dort haben möchtest.

Wenn ich dich richtig verstanden habe.

[dirksche]

Ja stimmt. Das ist auf jeden Fall eleganter und funktioniert auch soweit.
Jetzt werden aber immer noch die "leeren" <span> Elemente im Quelltext mit ausgegeben.
Das müsste doch über eine if Abfrage zu lösen sein, oder?
Bin leider nicht so firm in Javascript :-(

[Dirch]

Richtig. Du machst um das "return" eine If-Abfrage und lieferst nur etwas zurück, wenn du dafür einen Punkt haben möchtest. Wie sieht denn dein Code aus?

[dirksche]

Also momentan sieht es so aus:

	// subobject 'pagination' options
	if ($this->pagination) {
		echo ($oComma == true ? ', ' : '') . 'pagination: { ';
		echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
		$iComma = true;
		if ($this->paginationKeys) {
			echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
			$iComma = true;
		}
        echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {
        var title = $(this).find( ".pagi_nav" ).text();
        if ($this.is (".pagi_nav")) {
        return "<span>" + title + "</span>"; 
          }
        }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }'; // end of subobject 'pagination' options
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

Leider werden so keine Navigationspunkte angezeigt :-(

[Dirch]

hmm irgendwie sieht die if-Abfrage nicht so richtig aus, denn das aktuelle Element dort enthält ja nicht diese Klasse. Müßte das aber mal bei mir nachprogrammieren, um zu schauen wie es ginge.

[dirksche]

Oh Mann... ich bin so ein Rindvieh ;-)
Ich braue die Pagination ja nicht unbedingt zu nutzen. Ich kann mir ja auch selber die Navigation bauen und brauche nur auf die ID des Slider Elements zu verlinken und habe den selben Effekt.
Mach Dir also nun keinen Stress.

Trotz allem mal wieder vielen Dank für Deine schnelle und freundliche Unterstützung :-)

Liebe Grüße,
Dirk

[Dirch]

ja nun so kannst du es bestimmt auch machen. Kenne dein Projekt, die Struktur davon und auch die Gedanken die dir durch den Kopf gehen nicht.

Aber wenn du die Daten alle eh innerhalb des Sliders hast kannst du das auch so innerhalb schon regeln. Wäre vielleicht leichter - auch wenn du die kleine jQuery-Routine dazu brauchst. Auf der anderen Seite hast du das ganze ja auch schon mal über externe slideTo-Events schon getriggert. So ginge es auch.

Wenn's fertig ist, laß es doch mal sehen bitte.

Viele Grüße...
...Dirk

[jgrotstabel]

Hey,

habe da heute auch ein wenig dran "rumgezaubert". Für uns war es einfach nur wichtig den a Tag über eine fortlaufende Nummer ansprechbar zu machen.
Dafür haben wir im Template js_caroufredsel.html5 folgendes in Zeile 276 eingefügt:

		
echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {
var title = "paginID" + nr;
return "<a class=" + title + "><span>" + title + "</span></a>";
}';

Danke für Eure Inspiration ;-)