Bildgalerie mit Farbwechsel im Menü

Dann habe entweder ich etwas vergessen zu posten oder Du hast einen Fehler bei der Übernahme gemacht. Versuch mal, die Seite online zu bringen und poste die URL. Ich hatte eine Testseite gemacht und dort hat es funktioniert.
 
Du hast da eine ziemlich alte Version von jQuery mit der mein Zugriff auf das data-Attribut nicht funktioniert. Dieses sollte besser gehen:

Code:
            // Create event listeners for .controls clicks
            $('.control')
              .bind('click', function () {
                  previousPosition = currentPosition;
                  // Determine new position
                  currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;

                  var prevID = slides.eq(previousPosition).attr("data-menuitem");
                  if (prevID) $("#" + prevID).removeClass("active");
                  var currID = slides.eq(currentPosition).attr("data-menuitem");
                  if (currID) $("#" + currID).addClass("active");

                  // Hide / show controls
                  manageControls(currentPosition);
                  // Move slideInner using margin-left
                  $('#slideInner').animate({
                      'marginLeft': slideWidth * (-currentPosition)
                  });
              });
 
Ok, habe gerade die aktuelle jQuery Version installiert.

Jetzt klappt's!! Suuuuper. Ganz, ganz herzlichen Dank Dir.
 
Jetzt muss ich doch nochmal kommen.
Soweit funktioniert alles.
Allerdings möchte ich die Menüpunkte noch verankern mit den entsprechenden Slides.
D.h. onClick Menüpunkt Broschüren, springt zu entsprechendem Slide - was auch funktioniert.
Allerdings soll bei Click auf nächsten Menüpunkt (hier Anzeigen) "active" von Broschüren wieder "normal" werden.

Dies habe ich so gelöst:
Code:
    // onClick auf Menüpunkt
    function farbe ()    {
        document.getElementById("menuitem2").style.color='#fff';
        for(i=0;i<=document.getElementsByClassName("active").length;i++) {
        document.getElementsByClassName("active")[i].style.color='#6b7b87';
  }  
}
  
    function farbe1 ()    {
        var hinweis = document.getElementById("menuitem1").style.color='#fff';
        for(i=0;i<=document.getElementsByClassName("normal").length;i++) {
        document.getElementsByClassName("normal")[i].style.color='#6b7b87';
   }  
}

HTML:
        <nav2>
             <ul>
                <li><a id="menuitem1" class="active" href="#anzeigen" onClick="farbe1()">Anzeigen</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a id="menuitem2" href="#broschueren" onClick="farbe()" class="normal">Broschüren</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a id="menuitem3" href="#">Sales Support</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a id="menuitem4" href="#">Newsletter</a></li>
             </ul>
        </nav2>

Soweit so gut, funktioniert auch.
Allerdings funktioniert - sobald ich dem Menüpunkt "Broschüren" die Klasse "normal" zuweise - die ganze Übung von davor nicht mehr:
Code:
  // Create event listeners for .controls clicks
            $('.control')
              .bind('click', function () {
                  previousPosition = currentPosition;
                  // Determine new position
                  currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
                  var prevID = slides.eq(previousPosition).data("menuitem");
                  if (prevID) $("#" + prevID).removeClass("active");
                  var currID = slides.eq(currentPosition).data("menuitem");
                  if (currID) $("#" + currID).addClass("active");
 
Verstehe ich mal wieder nicht so richtig:
Code:
D.h. onClick Menüpunkt Broschüren, springt zu entsprechendem Slide - was auch funktioniert.
Hast Du das selbst implementiert? Dann poste doch mal, wie Du es gemacht hast.

Generell würde ich empfehlen, bei dem bisherigen Verfahren zu bleiben und in Javascript die Klassen setzen und löschen und die Farben durch das CSS zu steuern.

Wieder mal, was für mich naheliegend wäre: Klick auf einen Menüpunkt soll das zugehörige Bild in derr Slideshow ansteuern und gleichzeitig die Farbe beim vorigen Menüpunkt zurück setzen und beim neuen setzen.
 
Mittlerweile weiß ich, dass ich da sowieso einen Denkfehler drin habe, denn das wird nicht funktionieren mit der Art, wie ich es bisher gelöst hatte.

Wieder mal, was für mich naheliegend wäre: Klick auf einen Menüpunkt soll das zugehörige Bild in derr Slideshow ansteuern und gleichzeitig die Farbe beim vorigen Menüpunkt zurück setzen und beim neuen setzen.

Yep, genau so sehe ich das mittlerweile auch, habe allerdings nur Lösungen für alte jQuery Versionen gefunden, die dann (jetzt, wo ich die neue installiert habe) nicht funktionieren.
 
Inzwischen habe ich daran gearbeitet und festgestellt, dass Du Verweise auf Anker eingerichtet hattest. Das funktioniert so nicht, denn dabei wir die Buchführung der Slideshow mit currentPosition und den Pfeilen nicht aktualiert.
So funktioniert es bei mir jetzt:
HTML:
            <nav2>
                <ul>
                    <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="text1">Broschüren</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a id="menuitem3">Sales Support</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a href="#">Newsletter</a></li>
                </ul>
            </nav2>
Code:
    <script type="text/javascript">

        $(document).ready(function () {
            var currentPosition = 0;
            var slideWidth = 1050;
            var slides = $('.slide');
            var numberOfSlides = slides.length;

            // Remove scrollbar in JS
            $('#slideContainer').css('overflow', 'hidden');

            // Wrap all .slides with #slideInner div
            slides
              .wrapAll('<div id="slideInner"></div>')
              // Float left to display horizontally, readjust .slides width
              .css({
                  'float': 'left',
                  'width': slideWidth
              });

            // Set #slideInner width equal to total width of all slides
            $('#slideInner').css('width', slideWidth * numberOfSlides);

            // Insert controls in the DOM
            $('#slideshow')
              .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
              .append('<span class="control" id="rightControl">Clicking moves right</span>');

            // Hide left arrow control on first load
            manageControls(currentPosition);

            // Create event listeners for .controls clicks
            $('.control')
              .bind('click', function () {
                  // Determine new position
                  var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
                  gotoSlide(newPosition);
              });

            $("nav2 li a").each(function (idx) {
                $(this).bind("click", function () {
                    gotoSlide(idx);
                })
            });

            function gotoSlide(newPosition) {
                var previousPosition = currentPosition;
                currentPosition = newPosition;
                var prevID = slides.eq(previousPosition).attr("data-menuitem");
                if (prevID) $("#" + prevID).removeClass("active");
                var currID = slides.eq(currentPosition).attr("data-menuitem");
                if (currID) $("#" + currID).addClass("active");

                // Hide / show controls
                manageControls(currentPosition);

                // Move slideInner using margin-left
                $('#slideInner').animate({
                    'margin-left': slideWidth * (-currentPosition)
                });
            }

            // manageControls: Hides and Shows controls depending on currentPosition
            function manageControls(position) {
                // Hide left arrow if position is first slide
                if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
                // Hide right arrow if position is last slide
                if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() }
            }
        });
    </script>
 
Hmmm……… ok. Leider stimmen die "Anker" nicht.

Code:
<script type="text/javascript">

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 1050;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);


  // Create event listeners for .controls clicks
            $('.control')
              .bind('click', function () {
                  // Determine new position
                  var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
                  gotoSlide(newPosition);
              });
            $("nav2 li a").each(function (idx) {
                $(this).bind("click", function () {
                    gotoSlide(idx);
                })
            });
            function gotoSlide(newPosition) {
                var previousPosition = currentPosition;
                currentPosition = newPosition;
                var prevID = slides.eq(previousPosition).attr("data-menuitem");
                if (prevID) $("#" + prevID).removeClass("active");
                var currID = slides.eq(currentPosition).attr("data-menuitem");
                if (currID) $("#" + currID).addClass("active");
                  // Hide / show controls
                  manageControls(currentPosition);
              
                  // Move slideInner using margin-left
                  $('#slideInner').animate({
                      'marginLeft': slideWidth * (-currentPosition)
                  });
              }

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }  
});

</script>

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

Und die Slidshow:
HTML:
<div id="galerie">
                <!-- Slideshow HTML -->
                <div id="slideshow">
                    <div id="slideContainer">
                        <div class="slide" data-menuitem="menuitem1">
                            <img src="images/slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                             <img src="images/slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Luisina</strong><br>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
                      </div>
                        <div class="slide" data-menuitem="menuitem1">
                            <img src="images/slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Groupama</strong><br>
                                Die französische Groupama gehört europaweit zu den großen international tätigen Versicherungs&shy;gesellschaften. Eine Teilbelegung im Stern hat den Auftakt zum Aufbau ihrer Deutschland-Präsenz gegeben.
                            </figcaption>
                        </div>
                        <div class="slide" data-menuitem="menuitem1">
                            <img src="images/slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Galeries Lafayette</strong><br>
                                Für den Straßburger Standort der Galeries Lafayette stellt die deutsche Kundschaft eine sehr attraktive Premium-Zielgruppe dar. Sie wird über spezifische Anzeigen und In-House-Aktionen angesprochen, <br>die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.
                          </figcaption>
                        </div>
                        <div class="slide" data-menuitem="menuitem2">
                            <img src="images/slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
                                Dauer-Sichtbarkeit im unmittelbaren Anwendungs&shy;umfeld: ein einleuchtendes Ziel, das vom Crème Fraîche-Rezeptheft konsequent umgesetzt wird. Raffinierte Rezepte unterstreichen die Gourmet-Positionierung, folienkaschiertes, wischfestes Papier sorgt für Lebensdauer im gnadenlosen Küchenbiotop.
                          </figcaption>
                        </div>
                      
                         <div class="slide" data-menuitem="menuitem2">
                            <img src="images/slidebilder/sto.png" width="419" height="324" border="0" style="margin-left: 30px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Sto Broschüre</strong><br>
                                Für die französische Tochter von Sto <br>&ndash;dem weltweiten Marktführer bei Fassadendämmsystemen – sollten <br>Anwendungen und Service-Leistungen aus landespezifischer Perspektive <br>dar&shy;ge&shy;stellt werden. Das 50-seitige Ergebnis trifft den Nerv sowohl bodenständiger Handwerker als auch anspruchsvoller Architekten.
                           </figcaption>
                         </div>
                      
                         <div class="slide" data-menuitem="menuitem3">
                            <img src="images/slidebilder/ates.png" width="470" height="320" border="0" style="margin-left: 350px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>ATES, Architektenordner</strong><br>
                                Als Meinungsbildner mit besonders hohem Anspruch sind Architekten im Objektbereich ebenso gefürchtet wie unumgänglich. Der ATES-Ordner bringt die geballte Kompetenz der französischen Nr.1 für Sonnenschutz auf den Punkt – und ist zugleich ein sehr durchdachtes Planungswerkeug.
                           </figcaption>
                          </div>
                        
                             <div class="slide" data-menuitem="menuitem3">
                            <img src="images/slidebilder/mailing_sito_1.png" width="280" height="220" border="0" style="margin-left: 20px; margin-top: 70px;" />
                            <img src="images/slidebilder/mailing_sito_2.png" width="360" height="320" border="0" style="margin-left: 300px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Wilkhahn, Kick-off-Mailing Sito</strong><br>
                                Um vielbeschäftigte Fachhändler und leicht blasierte Innenarchitekten aus der Reserve zu locken veranstaltete Wilkhahn zur Einführung der Sessel&shy;reihe Sito eine aufwendige Präsen&shy;ta&shy;tion in Paris. Das Mailing verbindet Druck auf Transparentpapier, origi&shy;nelle Verarbeitung und elegantes Give-Away in Form eines Brieföffners aus lasergraviertem Edelstahl.
                        </figcaption>
                          </div>
                        
                          <div class="slide" data-menuitem="menuitem4">
                            <img src="images/slidebilder/novartis.jpg" width="217" height="307" border="0" style="margin-left: 600px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Novartis BPO</strong><br>
                                Als 'Global Player' hat Novartis Biopharmaceutical Operations (BPO) Produktionsstandorte in ver&shy;schiedenen Teilen der Welt. Das entwickelte Bau&shy;kasten&shy;konzept entspricht genau dem Corporate Design, basiert aber zugleich auf selbstverwaltetem Content Management: Die fortlaufenden Ausgaben werden intern generiert und über das Intranet welt&shy;weit verteilt.
                          </figcaption>
                         </div>
                        
                           <div class="slide" data-menuitem="menuitem4">
                            <img src="images/slidebilder/toupret.png" width="310" height="290" border="0" style="margin-left: 50px;" />
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Toupret</strong><br>
                                Fast jeder der 16.000 französischen Malermeister setzt Spachtelmassen und Deko-Produkte von Toupret ein &ndash; und kennt dennoch das Sortiment meistens nur oberflächlich. Bei einem Vertrieb <br>über Großhändler und angesichts der noch <br>starken Internet-Resistenz des Handwerks <br>bleiben Newsletters in gedruckter Form die effektivste Form der Informationsvermittlung.
                        </figcaption>
                          </div>
                  </div>
                </div>
                <!-- Slideshow HTML -->
  
        </div>
 
Zurück