[Erledigt] dk_caroufredsel mit Seitennavigation verheiraten
Hallo zusammen,
ich bin begeisterter NeuNutzer des CarouFredSels –*und nicht nur, weil mir die HintergrundKarussell-Funktion für mein aktuelles Projekt wie gerufen kommt! :D
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!
Liste der Anhänge anzeigen (Anzahl: 3)
Irgendwie klappt das nicht so richtig... Ich bin nicht sicher wg. dem JQuery.. und ob ich alles richtig aufgebaut habe:
Seitenstruktur: Anhang 11107
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: Anhang 11108
Diesen Artikel habe ich dann auf der jeweiligen Seite inkludiert im selben Artikel wie den restlichen Seiteninhalt: Anhang 11109
Zitat:
Zitat von
Dirch
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?
Liste der Anhänge anzeigen (Anzahl: 1)
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?
Zitat:
Zitat von
Dirch
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>
Zitat:
Zitat von
Dirch
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: Anhang 11116
Dem Div muss ich den Namen der Seite geben oder wo muss ich den vergeben?
