✔ Bildgalerie mit Farbwechsel im Menü

[Sempervivum]

Leider stimmen die "Anker" nicht.

Was meinst Du damit? Kommt ein falsches Bild, wenn Du einen Link im Menü klickst?
Edit:
So kann es nicht funktionieren: Mein Code funktioniert nur, wenn es eine eins-zu-eins-Zuordnung zwischen Menüeintragen mit a-Tag und Slides gibt. In deinem HTML gibt es jedoch neun Slides und nur vier Menüeinträge. Was möchtest Du denn erreichen? Soll die Slideshow, wenn man einen Eintrag im Menü klickt, an das erste Slide einer Gruppe springen?

 

[akdesign]

Ja genau, ich habe 4 Menüeinträge und es gibt pro Menüpunkt mehrere Slides (kommen allerdings noch mehrere dazu, das ist aktuell nur ein Minimum an Einträgen).
Also ja, bei Klick sollte der Sprung auf den ersten Eintrag der Slidegruppe, also menuitem1, 2, 3 etc) springen.
Plus eben der entsprechende Farbwechsel in den Menüeinträgen.

 

[Sempervivum]

Das ging relativ einfach zu machen. Den Slideindex bei den a-href-Tags als data-Attribute hinzu gefügt:

            <nav2>
                <ul>
                    <li><a id="menuitem1" data-slideidx="0" class="active" href="#">Anzeigen</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a data-slideidx="3" href="#broschueren" id="text1">Broschüren</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="menuitem3" data-slideidx="5" href="#broschueren">Sales Support</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a data-slideidx="7" href="#">Newsletter</a></li>
                </ul>
            </nav2>

und beim Klick ausgelesen:

            $("nav2 li a").each(function () {
                $(this).bind("click", function () {
                    var slideidx = $(this).attr("data-slideidx");
                    gotoSlide(slideidx);
                })
            });

 

[akdesign]

Ahh cool ok.
Verstehe ich das richtig, dass wenn ich jetzt z.B. zwischen Broschüren und SalesSupport noch 2 Sides einfüge, sich die nachfolgenden Slideindex um eben diese 2 erhöhen, also SalesSupport dann Index 7 wäre, und Newsletter entsprechend Index 9 ?

 

[Sempervivum]

Ja, das ist richtig. Wenn Du Slides einfügst, musst Du die folgenden Indizes neu berechnen. Ich habe jetzt den Code etwas erweitert, so dass das automatisch geht:

            $("nav2 li a").each(function () {
                $(this).bind("click", function () {
                    //var slideidx = $(this).attr("data-slideidx");
                    var slideidx = $(".slide[data-menuitem='" + $(this).attr("id") + "']").eq(0).index();
                    gotoSlide(slideidx);
                })
            });

Dann muss man aber allen Menüpunkten ihre ID geben:

            <nav2>
                <ul>
                    <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="menuitem2" href="#broschueren" id="text1">Broschüren</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="menuitem3" href="#broschueren">Sales Support</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="menuitem4" href="#">Newsletter</a></li>
                </ul>
            </nav2>

Als Folge werden dann auch alle eingefärbt. Wenn Du das nicht willst, kannst Du es leicht mit CSS steuern, z. B. indem Du den einzufärbenden Elementen eine zusätzliche Klasse gibst, z. B. "colorize".

 

[akdesign]

Ahhh, perfekt. Super! Vielen lieben Dank @Sempervivum. Du hast mir super weitergeholfen. Ganz toll.