[Erledigt] dk_caroufredsel mit Seitennavigation verheiraten

[laRocca]

Hallo zusammen,

ich bin begeisterter NeuNutzer des CarouFredSels –*und nicht nur, weil mir die HintergrundKarussell-Funktion für mein aktuelles Projekt wie gerufen kommt!
Ich möchte ein Hintergrundbild, dass sich beim klicken auf einen Navigationspunkt in meinem normalen Menü, so schön bewegt wie wenn man es als HintergrundKarussell für eine einzige Seite verwenden würde.

BeispielNavigation:
1. Home
2. Über mich
3. Kontakt

Aktuell kann ich ein HintergrundKarussell anlegen und es "Home" zuweisen –*dann ändern sich dort die Hintergrundbilder als SlideGalerie.
Ich möchte das aber SO nicht. Bei mir soll "Home" 1 Hintergrundbild haben und wenn ich auf "Über mich" klicke, dann soll der tolle Karussell-Effekt kommen und die Hintergrundbilder bewegen..

--> WEIß JEMAND WIE ICH DAS HINKRIEGEN KÖNNTE?

Edit: Ich hab auf der Demo-Seite ein Beispiel gefunden –*ich weiß aber nicht wie ich DAS jetzt ins Contao übersetzt bekomme, so dass meine Navigation auch noch die nav_default bleibt..
Wenn da jemand ne Info zu hätte wäre das auch toll!

[Dirch]

Ich versteh nicht so genau was du willst. Du klickst den link an und dann kommt eine komplett neue Seite oder bleibst du auf der Seite und es wird nur der Inhalt geändert? Bei ersterem dürfte dies wohl eher nicht funktionieren, bei letzterem schon. Du kannst beim Aufruf des Links ein Event über jQuery triggern:

//  scroll to an item using a jQuery selector
$("#foo").trigger("slideTo", "img.selected"); 

Da mußt du nur deine Daten anpassen, also die richtige caroufredsel-id eintragen und den richtigen Selektor wohin er dann scrollen soll.

[laRocca]

Im Grunde möchte ich die Funktionalität der Navigation wie in diesem Beispiel: http://www.todaythe12.com/#section_about

Ich klicke auf einen Navigationspunkt und der Hintergrund mach diese schöne Bewegung wie der Karussell-Hintergrund.

Das hab ich mir einfach so in meiner kleinen Welt gedacht, das doch eigentlich das CarouFredSel dafür nutzbar sein müsste - oder bin ich da vollständig auf dem Holzweg?

[Dirch]

ahh so etwas. Klar kannst du das machen. Allerdings nicht mit dem Hintergrund-Slider - das ist nur eine Galerie. Was du machst ist, daß du die Wrapper-Elemente in einem Artikel benutzt. Da du hier komplexe Inhalte scrollen willst, mußt du diese dann noch in einem Artikel-Container platzieren und dann in den Wrappern mit "Artikel einfügen" inkludieren. Bei den Einstellungen setzt du die Karussell-Breite einfach auf 100% bzw. müßtest das auch weglassen können, da der Slider eh die ganze zur Verfügung stehende Breite verwendet, wenn er nicht anderweitig eingeschränkt wird.

Das Menü platzierst du einfach im Header und sprichst die einzelnen Slider so wie in meinem vorherigen Post an. Also ein kleiner jQuery-Aufrauf beim Klick auf den Link, der zum richtigen Inhalt slidet. Eigentlich genau so wie auf der Seite.

[laRocca]

Ich verstehe nicht so ganz wie Du das erklärst gluabe ich:

Ich lege in einem Artikel an:

1. CarouFredSel Wrapper: Umschlag Anfang
2. Bild
3. CarouFredSel Wrapper: Umschlag Ende

aber was meinst Du mit "in einem Artikel-Container platzieren"? Was ist denn ein Artikel-Container?

Wenn das dann gemacht wäre, würde ich diesen Container in einem separaten Artikel in meine Seite einfügen und dann hätte ich darin die Elemente:
1. CarouFredSel Wrapper: Umschlag Anfang
2. Artikel-Container inkludiert
3. CarouFredSel Wrapper: Umschlag Ende


Und zur Navigation:
Wo muss ich denn den PHP Code genau einfügen? Und was genau umbenennen?
Redest Du da schon von einem eigenen Modul?

[Dirch]

Also es hängt davon ab was du sliden willst. In der von dir genannten Seite wird komplexer Inhalt geslidet nicht nur einzelne Bilder.

Für carouFredSel wird jedes Element zwischen Start- und Stop-Wrapper als jeweils 1 slide benutzt. Die Inhalts-Elemente von Contao sind recht "einfach" gestrickt. Wenn du also Inhalte brauchst, die z.B. mehrspaltig sein sollen, mit Bildern/Texten gemixt usw. dann mußt du einen Weg finden diese "komplexen" Inhalte so zu verpacken, daß sie im Artikel wo der Slider definiert werden 1 Element bilden. Das hast du richtig aufgeschrieben mit dem inkludierten Artikel. "Container" war hier nur ein Name dafür. Due legst einen eigenen Artikel für deine komplexen Inhalte an - die du versteckst und eben über das CE "Include-Elemente->Artikel" einbindest. Wenn man das mal gemacht/gesehen hat, dann merkt man wie leicht das eigentlich geht.

Wegen der Navi rede ich nicht von einem eigenen Modul. Du mußt allerdings den Slider von außen ansprechen, da du wohl mit einer Pagination nicht hinkommst. Das machst du auch nicht mit PHP, sondern mit jQuery. Also z.B:

$("#kontakt_btn").click(function() {
    $("#caroufredsel_ID").trigger("slideTo", "#kontakt"); 
}); 

Dabei setzt du deinem Menü-Button die ID #kontak_btn und dem zugehörigen Slide #kontakt. Einbinden kannst du die Codes im Layout oder aber auch im js-Template. Fertisch ist die Geschichte. =)

[derRenner]

Hallo,

so schnell mal überdacht, würd ich auch die Vorgehensweise von @Dirch wählen. Also den kompletten Inhalt (strukturiert) erstellen und diesen dann via Include-Elemente Artikeln zuweisen/einfügen (je nachdem, wieviele "Navigationspunkte" du hast - die entsprechende Anzahl von Artikel).
Jetzt jeden Artikel zwischen die CarouFredsel-Wrapper einschliessen.

Ich könnte mir sogar vorstellen, dass die "Navigation" dann über die Pagination ohne jQuery realsierbar sein könnte.
Die Pagination z.B. wie in deinem Link rechts oben positionieren. Die erzeugten <span>s via CSS ausblenden und die <a>s auf die gewünschte Navigationspunkte-Grösse formatieren. Das ganze transparent machen, via z-index nach oben heben und unterhalb (also deckungsgleich, aber eine Ebene tiefer legen) dieser "Navigation" dann DIVs mit der Navigationsbeschriftung.

Mit CSS das ganze deinen Wünschen entsprechend formatieren und gut ist

[laRocca]

Also es hängt davon ab was du sliden willst. In der von dir genannten Seite wird komplexer Inhalt geslidet nicht nur einzelne Bilder.

Danke erst mal für Deine umfangreichen Antworten (das selbe auch nochmal an denRenner ; )
Ich möchte die Funktion der Navigation der Beispielseite haben (das was passiert, wenn ich auf "About" / "Projects" / "Contact" klicke passiert) – dass der gesamte Inhalt nach links oder rechts slided.

Mit "komplexen Inhalten" meinst Du dass viele verschiedene Inhaltselmente (Artikel, Bilder, Akkordeons und weiß der Kuckuck..) in einem Artikel zusammengefasst sind?
Wie meinst Du das mit dem verstecken?

Das machst du auch nicht mit PHP, sondern mit jQuery. Also z.B:

$("#kontakt_btn").click(function() {
    $("#caroufredsel_ID").trigger("slideTo", "#kontakt"); 
}); 

Dabei setzt du deinem Menü-Button die ID #kontak_btn und dem zugehörigen Slide #kontakt. Einbinden kannst du die Codes im Layout oder aber auch im js-Template. Fertisch ist die Geschichte. =)

Dem Menü-Button gebe ich die ID in der Seitenstruktur bei CSS-Klasse?

(Sorry für die vielen Nachfragen.. )

[Dirch]

Mit "komplexen Inhalten" meinst Du dass viele verschiedene Inhaltselmente (Artikel, Bilder, Akkordeons und weiß der Kuckuck..) in einem Artikel zusammengefasst sind?

genau

Wie meinst Du das mit dem verstecken?

irgendwo muß dieser Artikel vorhanden sein. Also legt man sich eine Seite im Seitenbaum an, die man nicht freischaltet - sie ist also versteckt/inaktiv. In diese Seite platziert man nun seine Artikel (die man sichtbar schaltet). Diese Artikel kann man dann in jedem anderen Artikel einbinden. Die versteckte Seite fungiert dabei als "Container" für diese Artikel und tut sonst nichts weiter. Wir brauchen sie nur um die Artikel irgendwo erstellen/haben zu können. Was ich noch vergessen hatte ist, daß du in diesem Artikel als erstes und letztes Element ein eigener HTML-Code setzten mußt mit einem <div> beim ersten und beim letzten mit </div>.

also:

HTML-Code: <div>
beliebige weitere CEs
HTML-Code </div>

Dem Menü-Button gebe ich die ID in der Seitenstruktur bei CSS-Klasse?

genau

[laRocca]

ok - DANKE - auf ins gefecht! : )

[laRocca]

Irgendwie klappt das nicht so richtig... Ich bin nicht sicher wg. dem JQuery.. und ob ich alles richtig aufgebaut habe:

Seitenstruktur: seitenstruktur.jpg
Jeder Seite habe ich in der Seitenstruktur eine CSS Klasse vergebenen –*mit dem jeweiligen Seitennamen.

In der Caroufredsel-Seite habe ich dann einen sichtbar gestellten Artikel erstellt: artikelaufbau.png

Diesen Artikel habe ich dann auf der jeweiligen Seite inkludiert im selben Artikel wie den restlichen Seiteninhalt: artikel_seite.png

Dabei setzt du deinem Menü-Button die ID #kontak_btn und dem zugehörigen Slide #kontakt. Einbinden kannst du die Codes im Layout oder aber auch im js-Template.

Das JQuery-Teil habe ich im Seitenlayout bei "Eigener JavaScript-Code" wie folgt eingefügt:
<script>
$("#home_btn").click(function() {
$("#caroufredsel_ID").trigger("slideTo", "#home");
});
</script>

--> wäre der Code für alle meine Seiten dann entsprechend so richtig (Nur die Hauptseiten [home, news, kontakt] haben den Slide) oder muss ich das anders schreiben:
<script>
$("#home_btn").click(function() {
$("#caroufredsel_ID").trigger("slideTo", "#home");
});
$("#news_btn").click(function() {
$("#caroufredsel_ID").trigger("slideTo", "#news");
});
$("#kontakt_btn").click(function() {
$("#caroufredsel_ID").trigger("slideTo", "#kontakt");
});
</script>

---> Ich verstehe auch noch nicht wo genau ich jetzt den Slide bennenen kann –*im versteckten CarouFredsel-Artikel dem Einzelement (in meinem Fall "Bild") eine CSS-ID, bzw. Klasse geben?

[Dirch]

Hallo du,

du hast fast alles richtig gemacht. Die Container sehen gut aus, auch das einbinden in den Artikel sieht gut aus. Die einzige Stelle, die du nicht richtig bzw. nicht richtig verstanden hast ist das mit der #caroufredsel_ID. Das war/ist nur ein Platzhalter. Du mußt jetzt im Quellcode deiner Seite schauen welche ID der Slider erhalten hat. Da findest du etwas wie z.B. #caroufredsel_36. Diese ID ersetzt du dann bei allen Buttons mit dieser Zahl. Dann erst sprichst du den richtigen Slider an.

Den Slide benennen kannst du in dem HTML-Code deines Unter-Artikels. Statt nur <div> kannst du dort ein <div id="xyz"> setzen. Das div ist das erste Element dieses Slides und umschließt gleichzeitig den ganzen Slide. Daher kannst du dort die ID anbringen.

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

[laRocca]

Sry, ich fasse mich nochmal zusammen, weil ich was geändert habe – irgendwas stimmt noch nicht...

Meine Hauptnavigationspunkte sind "Home", "News", "Kontakt" - es existieren jeweils Unternavigationspunkte.
Ich möchte dass das erste Artikelbild bei meinem Hauptnavigationspunkt "Home" als Hintergrundbild ausgegeben wird, das 2. Artikelbild beim Hauptnavipunkt "News" als HG und das 3. Artikelbild dann bei "Kontakt" im HG reinslided. Es slided aktuell aber nichts..
Ich habe Meinen Hauptnavipunkten bei CSS-ID in der Seitenstruktur jeweils die klasse "NAME_btn" gegeben, woraus sich im unten aufgeführten Script hinter dem $ in der Klammer .home_btn für den 1. Hauptnavipunkt ergibt?

Die einzige Stelle, die du nicht richtig bzw. nicht richtig verstanden hast ist das mit der #caroufredsel_ID. Das war/ist nur ein Platzhalter. Du mußt jetzt im Quellcode deiner Seite schauen welche ID der Slider erhalten hat. Da findest du etwas wie z.B. #caroufredsel_36. Diese ID ersetzt du dann bei allen Buttons mit dieser Zahl. Dann erst sprichst du den richtigen Slider an.

Erstelle ich 1 Seitenlayout PRO Hauptnavigationspunkt oder 1 Seitenlayout für ALLE meine Hauptnavigationspunkte?

Im Seitenlayout dann bei eigener JavaScript-Code:
<script>
$(".home_btn").click(function() {
$("#caroufredsel_166").trigger("slideTo", "#home");
});
$(".news_btn").click(function() {
$("#caroufredsel_166").trigger("slideTo", "#news");
});
$(".kontakt_btn").click(function() {
$("#caroufredsel_166").trigger("slideTo", "#kontakt");
});
</script>

Den Slide benennen kannst du in dem HTML-Code deines Unter-Artikels. Statt nur <div> kannst du dort ein <div id="xyz"> setzen. Das div ist das erste Element dieses Slides und umschließt gleichzeitig den ganzen Slide. Daher kannst du dort die ID anbringen.

Hier mein Artikelaufbau: Artikel_div.png
Dem Div muss ich den Namen der Seite geben oder wo muss ich den vergeben?

[Dirch]

Hmm möglicherweise haben wir uns missverstanden bzw. ich habe anhand der Beispielseite es dir zu "komplex" gemacht denn auf dieser wird kein Hintergrundbild geslided, sondern komplexer Inhalt. Meine Erklärungen bezogen sich darauf, wenn man komplexen Inhalt - der über die Grund-Elemente hinausgeht, wie z.B. Spaltensets, mehrere Bilder mit text gemischt usw. - sliden will. Eben so wie das auf der Beispielseite ist.

Wenn du NUR 1 Bild und das im Hintergrund sliden willst, geht das viel einfacher. Du nimmst die Hintergrundgalerie mit den 3 Bildern. Wenn du dann die Webseite mit einem Tool deiner Wahl anschaust kannst du sehen, daß jedem Bild eine ID zugewiesen wurde der Form "caroufredsel_gallery_ID_n". ID steht hier wieder für die Slider-ID und n für die Bild-Nummer. Jetzt suchst du dir noch die passenden Bild-Nummern raus. Die Ansteuerung funktioniert genauso:

$(".home_btn").click(function() {
$("#caroufredsel_ID").trigger("slideTo", "#caroufredsel_ID_n"); 
}); 

Den Artikel-Container brauchst du dann nicht mehr - der ist nur für den gemischten und komplexen Inhalt gedacht. Grundsätzlich funktioniert die Funktionalität in der Art, aber wenn da Seitenwechsel dazukommen und die Seite neu geladen wird, dann dürfte das so wie du das willst nicht mehr klappen. Geht dann nur wenn du allen Inhalt auf der gleichen Seite hast.

Aber dazu kenn ich einfach das wie du es umsetzten willst nur zu bruchstückhaft...

Beste Grüße...
...Dirk

[laRocca]

Ja – ich sehe gerade glaube was Du meinst: die ScrollTo Geschichte die ich vor habe funktioniert nicht so richtig..?
Es wird nicht immer das richtig Bild angesprochen, bzw. angescrollt... kann das sein?

Die Reihenfolge ändert sich irgendwie im Karusell, obwohl ich die IDs vergeben hab und diesmal glaube ich auch den richtigen JS-Code eingetragen habe...

Aber wirklich - nochmal danke für die umfassende Hilfe!

[laRocca]

Mist - ich kanns Dir gerade nicht zeigen, weil die Seite noch nicht online ist - aber es scheint gerade so, als ob es doch funktioniert. Und zwar in
FF 21.0
Safari 5.1.9
IE 10 / 9

Nur im Chrome 25.0.1364.172 blinkt das Bild nachdem der Slide gelaufen ist... Woran kann denn sowas liegen??

[Dirch]

Nur im Chrome 25.0.1364.172 blinkt das Bild nachdem der Slide gelaufen ist... Woran kann denn sowas liegen??

ahh ok. Ich kann ja nur raten was du da baust/gebaut hast.

Wegen des blinkens. Hast du den Crossfade als Übergang genommen? Das ist etwas seltsam mit dem. Manchmal geht er überall super, manchmal blinkt er zwischen dem Übergang. Das ist entweder ein Bug im Slider oder in den Browsern. Ich weiß es nicht genau. Jedenfalls gab es letztens ein Update auf eine neue Slider-Version. Leider hat er kein Changelog geschrieben, so daß ich nicht weiß was geändert wurde. Aber vielleicht unter anderem auch so etwas, da doch schon jemand auch auf dieses blinken im crossfade hinwies...

[laRocca]

nein, den effekt hatte ich nicht drin. seltsam. finde auch keinen javascript error.

wenn wir hier eh noch dabei sind.. vielleicht kannst du mir das auch beantworten

kann ich dem caroufredsel-control sagen, dass es nicht nur auf klick, sondern auch auf mousover den slide anschiebt?

[Dirch]

Statt bei deinen buttons .click zu nehmen benutzt du .hover. Dann wird das bei Hover ausgeführt.

[laRocca]

du meinst beim javascriptcode?
Also im Seitenlayout bei "Eigener JavaScript-Code" hab ich jetzt stehen:

<script>
$("#caroufredsel_244").carouFredSel({
	next : {
		button : "mouseover"
},
	prev : {
		button : "mouseover"
},
});
</script>

So hätte ich das zumindest laut der Caroufredsel-Configurations-Beispiele verstanden..?

[laRocca]

ich suche jetzt seit vorhin das forum ab, jegliche templates, die was mit caroufredsel zu tun haben im contao und finde nicht, wo ich diese Änderung von ".click" zu ".hover" vornehmen soll - kannst Du mir das bitte noch erklären?

[planepix]

Wenn ich das richtig gelesen habe, dann müsstest du in dem Code hier https://community.contao.org/de/show...l=1#post271506 das ".click" in ".hover" ändern.

[laRocca]

Achso.. das passt aber doch garnicht für meinen neuen Fall.

Ich möchte jetzt die regulären Caroufredsel-Controller bei Mouseover navigieren lassen: .caroufredsel_prev & .caroufredsel_next sollen bei "mouseover" und nicht bei "click" scrollen.

Der Code oben bezog sich auf mein normales Navigationsmenü und den Slide meines Hintergrundbildes / pro Menüpunkt.

[planepix]

ok. dann warten wir bis der "Chef" wieder hier vorbeischaut

[Dirch]

Achso.. das passt aber doch garnicht für meinen neuen Fall.

Ich möchte jetzt die regulären Caroufredsel-Controller bei Mouseover navigieren lassen: .caroufredsel_prev & .caroufredsel_next sollen bei "mouseover" und nicht bei "click" scrollen.

Der Code oben bezog sich auf mein normales Navigationsmenü und den Slide meines Hintergrundbildes / pro Menüpunkt.

ach so aha. Das hättest du etwas deutlicher heraus stellen müssen wo wir doch die ganze Zeit über das Menü gesprochen haben.

Die Sachen mit dem eigenen HTML-Code sind nur für die externe Ansteuerung. Der Slider muß mit den notwendigen Parametern gestartet werden, daher muß es ins js-Template. Das kopierst du dir und editierst es anschließend.

Dazu suchst und änderst die Stelle dort so ab:

Original:

    // subobject 'prev' options
    if ($this->navigation || $this->prevKey) {
        echo ($oComma == true ? ', ' : '') . 'prev: { ';
        if ($this->navigation) {
            echo 'button: "#caroufredsel_prev_' . $this->id . '"';
            $iComma = true;
        } 

Neu:

    // subobject 'prev' options
    if ($this->navigation || $this->prevKey) {
        echo ($oComma == true ? ', ' : '') . 'prev: { ';
        if ($this->navigation) {
            echo 'button: "#caroufredsel_prev_' . $this->id . '"';
echo ', event: "mouseenter"';
            $iComma = true;
        } 

Das machst du dann noch genauso bei dem 'next' button. Habe es jetzt hier lokal nicht getestet, aber sollte so gehen.

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

[laRocca]

ok sorry, dass ich mich so doof ausgedrückt hab

das funktioniert mit dem mouseovern - 1000 DANK!!!

Jetzt geht immer 1 Bild-Slide / pro Mouseover auf den Controller und wenn ich den Controller Klicke, werde ich ins leere geleitet.
>> Kann ich das auch so einrichten, dass der Slide einfach in die entsprechende Richtung läuft, wenn ich mit der Maus auf dem Control-Button bleibe (ohne dass ich nochmal vom Ctrl-Button runter und wieder drauf muss)?
>> Kann ich diese Verlinkung ins Leere wieder durch eine Funktion ersetzen? Also dass ich per Mouseover und Klick den Control-Button steuern kann? Ich hab versucht Deinen Code wie s.u. zu verändern, aber dann wird mir die ganze Seite beim Aufrufen nur weiß –*ohne Inhalt –*angezeigt:

	// subobject 'next' options
	if ($this->navigation || $this->nextKey) {
		echo ($oComma == true ? ', ' : '') . 'next: { ';
		if ($this->navigation) {
			echo 'button: "#caroufredsel_next_' . $this->id . '"';
echo ', event: "mouseenter","click"';
			$iComma = true;
		}

[Dirch]

hmm da dies jQuery Mouse-Events sind, sollte statt einen mousenter auch ein hover gehen. tausch das mal aus, dann sollte es beim hovern scrollen.

So wäre der Code richtig:

echo ', event: "mouseenter"';
echo ', event: "click"'; 

Ob das mit den mehreren Events gleichzeitig in dieser Form geht weiß ich allerdings nicht. Das mußt du ausprobieren. Wäre toll wenn das geht, sonst wüßte ich an dieser Stelle nicht weiter.

[Dirch]

Wenn das andere nicht geht, geht es vielleicht auch so:

echo ', event: "mouseenter, click"'; 

[laRocca]

In beiden Fällen funktioniert dann der Mouseover-Slide nicht mehr –*nur noch der Klick : (

[Dirch]

In beiden Fällen funktioniert dann der Mouseover-Slide nicht mehr –*nur noch der Klick : (

Das hatte ich befürchtet, daß er bei mehreren Events nur das letzt angegebene verwendet. Schade.

[laRocca]

Danke Dir trotzdem für Deine geduldige Hilfe!!