Bildgalerie mit Farbwechsel im Menü


akdesign

Erfahrenes Mitglied
Hallo Zusammen,
ich habe eine Bildgalerie erstellt und würde nun gerne per JS die Funktion einbinden, dass wenn der Nutzer auf Bild X angekommen ist, sich Menüpunkt X entsprechend farblich ändert.

Habe das bisher nur mit Klick auf Bild X hinbekommen.

Ich bin gerade erst dabei, JS richtig zu lernen, wäre aber sehr dankbar für eine Hilfestellung.

Mir ist klar, dass ich eine if Anfweisung einbinden muss.

Also im Prinzip, wenn Bild X erreicht, dann ändere style. color

Ein paar Codeschnipsel/Versuche sind schon drin, aber ich komme nicht weiter.


HTML:
<!doctype html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href="style.css" rel="stylesheet">
<link href="slideshow.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<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
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
    // 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>



<script type="text/javascript">
    function farbe ()    {
    document.getElementById("text1").style.color='#fff';
    }
</script>



<!--
<script language="javascript">
        function setVisibility()
        {
            var val = document.getElementById('president_rezeptheft');

            if (val == 'broschueren')
            {
                document.getElementById("text1").style.color='#fff';
            }
        }
</script>



<script type="text/javascript">
    var Bild = ("broschueren")
</script>


<script type="text/javascript">
    var rezeptheft = document.getElementById("president_rezeptheft");

    if (rezeptheft !== "visible" )
{
    alert("Das Bild wurde nicht korrekt geladen!");
}
   
    function menu ()    {
        if ("president_rezeptheft") =
    document.getElementById("president_rezeptheft");
    }
</script>

<script language="javascript">
        function setVisibility()
        {
            var val = document.getElementById('president_rezeptheft');

            if (val == 'president_rezeptheft')
            {
                document.getElementById("text1").style.color='#fff';
            }
        }
</script> -->

</head>

<body >

    <div id="wrapper">
   
        <header><img src="images/logo.png" class="logo"></header>
       
        <main><!--<img src="images/background.jpg">-->
       

       
        <nav2>
            <ul>
                <li><a href="#">Anzeigen</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#broschueren" id="text1">Broschüren</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#broschueren">Sales Support</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Newsletter</a></li>
            </ul>
        </nav2>
       
       
       
        <div id="galerie">
       
            <!-- Slideshow HTML -->
            <div id="slideshow">
                <div id="slideContainer">
                    <div class="slide">
                    <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="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">
                    <img src="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">
                    <img src="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, die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.</figcaption>
                    </div>
                 
                      <div class="slide" id="broschueren"> <a href="#" onClick="farbe()"><img src="slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;"/></a>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
                         Dauer-Sichtbarkeit im unmittelbaren Anwendungsumfeld: 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>
            </div>
            <!-- Slideshow HTML -->   
   
        </div>
         
        </main>
   
    </div>
   
</body>
</html>


CSS:
@charset "UTF-8";
/* CSS Document */

html, body {
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
    line-height: 130%;
    border-width: 0px;
    font-style: normal;
    /*color: aqua;*/
}

#wrapper    {
    margin-left: auto; /*mittig setzen*/
    margin-right: auto;
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    height: 830px;
    /*background-color: aqua;*/
}

header    {
    width: 100%;
    height: 12.048193%;
    /*background-color: antiquewhite;*/
}

.logo    {
    float: right;
    padding: 1.8% 0px 0px 0px;
    height: 69%;
}

main    {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    max-width:100%;
    height: 79.518072%;
    /*background-color:blueviolet;*/
}

#galerie    {
    /*background-color: chartreuse;*/
    background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;
    max-width: 1050px;
    width: 100%;
    height: 500px;
    position: relative;
    top: 100px;
}

.linie_fig {
    color: #990000;
    font-weight: bold;
    padding: 0px 5px 0px 0px;
    font-size: 130%;
    vertical-align: 20%;
}



/*Navi oben*/

nav2 {
    position: absolute;
    width: 1050px;
}


nav2 ul     {
    list-style: none;
    border: 0;
    /*background-color: aqua;*/
    float: right;
    margin: 70px 0px 0px 0px;
}

nav2 li     {
    display: inline;
}

nav2 a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%;
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
   
}

nav2 a:hover     {
    color: #fff;
}

nav2:active     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}




/**
* Slideshow style rules.
*/

#content.slide {
      margin:0 auto;
    width:93px;
    height:450px;
    display: flex;  /*für vertikale Zentrerung*/
      align-items: center; /*für vertikale Zentrerung*/
    /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
    /*background-color: aquamarine;*/
}


#slideshow {
    width: 1050px;
    margin: 0;
    padding: 0;
    height:500px;
    z-index:10;
    position: absolute;
    /*background-color:#fff;*/
}


#slideContainer {
    overflow: hidden;
    width: 930px;
    height: 500px;
    position: absolute;
    margin: 30px 0px 0px 60px;
    /*background-color: antiquewhite;*/
}


.slide {
      margin:0 auto;
    width:93px;
    height:450px;
    display: flex;  /*für vertikale Zentrerung*/
      align-items: center; /*für vertikale Zentrerung*/
    /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
    /*background-color: aquamarine;*/
}



figcaption {
    position: relative;
    width: 350px;
    height:400px;
    /*background-color: aquamarine;*/
    color: #666;
}

.slide:nth-child(1) figcaption {
    margin: 80px 0px 0px 300px;
    position: absolute;
}

.slide:nth-child(2) figcaption {
    margin: 110px 0px 0px 100px;
    position: absolute;
   
}

.slide:nth-child(3) figcaption {
    margin: 50px 0px 0px 200px;
    position: absolute;
}

.slide:nth-child(4) figcaption {
    margin: 150px 0px 0px 400px;
    position: absolute;
}


/**
* Slideshow controls style rules.
*/
.control {
  display:block;
  width:40px;
  height:348px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
      /* Transparenter Hintergrund:
  filter:alpha(opacity=8); /* IE
  opacity:0.8; /* allgemein
  -moz-opacity:0.8; /* Mozilla
  -khtml-opacity:0.8; /* KTHML
  -opera-opacity:0.8; /* Opera
    */
  z-index: 99;
}


#leftControl {
  top:200px;
  left:20px;
  background:url(images/pfeil_links.gif) no-repeat 0 0;
}

#rightControl {
  top:200px;
  right:0;
  background:url(images/pfeil_rechts.gif) no-repeat 0 0;
}
 

Sempervivum

Erfahrenes Mitglied
Wenn ich das richtig sehe, ist die Nummer des angezeigten Bildes im Click-Handler für die Controls in der Variablen currentPosition verfügbar. Dort kannst Du sie auf die fragliche Nummer vergleichen und das betr. Element umfärben:
Code:
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    var posChangeColor = 3;
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    if (currentPosition == posChangeColor) {
        document.getElementById("id-des-umzufaerbenden-Elementes").style.color = "red";
    }
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
 

akdesign

Erfahrenes Mitglied
Ok, das ist doch schon ein deutlicher Schritt.

Ich habe das jetzt so eingebunden:
Code:
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
      var posChangeColor = 3;
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
       if (currentPosition == posChangeColor) {
        document.getElementById("text1").style.color = '#fff';
   
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

Allerdings verschwinden dann die Controls.

Wenn ich
Code:
 if (currentPosition == posChangeColor) {
entferne, dann funktioniert im Grunde der Farbwechsel, allerdings halt bei currentControl und nicht bei sozusagen currentControl+3

Kann ich das nicht irgendwie mit der id des Bildes verknüpfen?
 

Sempervivum

Erfahrenes Mitglied
In dem Code, den Du gepostet hast, ist ein Fehler: Die schließende geschweifte Klammer für das eingefügte "if" fehlt. Dadurch funktioniert das Skript nicht richtig. Sieh dir meinen Code an, dort ist die Klammer drin.
Wenn Du
Code:
 if (currentPosition == posChangeColor) {
entfernst, ist auch die öffnende Klammer weg und es besteht kein Syntaxfehler mehr, wohl aber ein logischer weil das Einfärben bei allen Bildern passiert.
 

akdesign

Erfahrenes Mitglied
OK, cool. Danke @Dempervivum. Das funktioniert jetzt super.

Allerdings wirds jetzt kompliziert. Denn wenn ich jetzt sage, an Pos2 soll auch der Farbwechsel sein (was ja auch klappt) und dann aber weiter klicke auf Pos3, dann sind beide eingefärbt.

Und was passiert wenn der Nutzer erst z.B. 10 Positionen weiter klickt und dann wieder zurück? Ich denke, dann haut das mit der Pos-Angabe nicht mehr hin, dann müsste ich ja zig Positionen definieren - oder denke ich hier zu kompliziert?

Daher denke ich immer noch, das müsste alles an die Bild id geknüpft sein.
 

Sempervivum

Erfahrenes Mitglied
Das verstehe ich noch nicht vollständig:
Allerdings wirds jetzt kompliziert. Denn wenn ich jetzt sage, an Pos2 soll auch der Farbwechsel sein (was ja auch klappt) und dann aber weiter klicke auf Pos3, dann sind beide eingefärbt.
Soll an Pos 2 der Farbwechsel für das selbe Element sein oder für ein anderes? Wenn Du schreibst, dass das auch klappt, hast Du ja wahrscheinlich schon etwas geändert - dann poste mal deinen neuen Code.
Und was passiert wenn der Nutzer erst z.B. 10 Positionen weiter klickt und dann wieder zurück? Ich denke, dann haut das mit der Pos-Angabe nicht mehr hin, dann müsste ich ja zig Positionen definieren - oder denke ich hier zu kompliziert?
In dem Fall ist doch die Nummer der betr. Position immer noch die selbe, oder? Allerdings könnte das Problem bestehen, dass ich beim Fortschalten der Nummer und Überschreitung nach unten oder oben kein Umlauf statt findet und wahrscheinlich an anderer Stelle ein Modulo-Operation stattfindet. Das ließe sich aber sicher beheben. Oder man müsste die Abfrage, wie Du schreibst, am Bild fest machen.

Naheliegend wäre für mich das folgende: Zu jedem Bild gehört ein Menüpunkt und soll jeweils eingefärbt werden. Verlässt man ein Bild, muss die aktuelle Einfärbung gelöscht und der neue Menüpunkt eingefärbt werden. Aber anscheinend hast du etwas anderes vor.
 

akdesign

Erfahrenes Mitglied
Naheliegend wäre für mich das folgende: Zu jedem Bild gehört ein Menüpunkt und soll jeweils eingefärbt werden. Verlässt man ein Bild, muss die aktuelle Einfärbung gelöscht und der neue Menüpunkt eingefärbt werden. Aber anscheinend hast du etwas anderes vor.

Genau das habe ich vor, zwar nicht bei jedem Bild, aber das ist ja nicht das Wesentliche.
 

Sempervivum

Erfahrenes Mitglied
Das war relativ einfach.

HTML:
            <nav2>
                <ul>
                    <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
                    <li class="linie">&nbsp;|&nbsp;</li>
                    <li><a 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 href="#">Newsletter</a></li>
                </ul>
            </nav2>



            <div id="galerie">

                <!-- Slideshow HTML -->
                <div id="slideshow">
                    <div id="slideContainer">
                        <div class="slide" data-menuitem="menuitem1">
                            <img src="images/dia0.jpg" width="243" height="311" border="0" style="margin-left: 30px;" />
                            <img src="images/dia1.jpg" 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">
                            <img src="images/dia2.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="menuitem3">
                            <img src="images/dia3.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, die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.
                            </figcaption>
                        </div>

                        <div class="slide" id="broschueren">
                            <a href="#"><img src="images/dia3.jpg" width="331" height="242" border="0" style="margin-left: 30px;" /></a>
                            <figcaption>
                                <span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
                                Dauer-Sichtbarkeit im unmittelbaren Anwendungsumfeld: 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>
                </div>
                <!-- Slideshow HTML -->
Den a-Tags im Menü, die eingefärbt werden sollen, habe ich jeweils eine ID gegeben. Den div.slide-Tags ein data-Attribut, in dem die ID des zugehörigen a-Tags steht.

Javascript:
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");

                  // Hide / show controls
                  manageControls(currentPosition);
                  // Move slideInner using margin-left
                  $('#slideInner').animate({
                      'marginLeft': slideWidth * (-currentPosition)
                  });
              });
Beim alten Element wird die Klasse "active" gelöscht und beim neuen gesetzt. Die Farbänderung kannst Du dann mit CSS machen:
CSS:
                    nav2 a {
                        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
                        font-size: 100%;
                        color: #6b7b87;
                        text-decoration: none;
                        font-weight: normal;
                    }
                    nav2 a.active {
                        color: red;
                    }
 

Sempervivum

Erfahrenes Mitglied
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.
 

Sempervivum

Erfahrenes Mitglied
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)
                  });
              });
 

akdesign

Erfahrenes Mitglied
Ok, habe gerade die aktuelle jQuery Version installiert.

Jetzt klappt's!! Suuuuper. Ganz, ganz herzlichen Dank Dir.
 

akdesign

Erfahrenes Mitglied
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");
 

Sempervivum

Erfahrenes Mitglied
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.
 

akdesign

Erfahrenes Mitglied
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.
 

Sempervivum

Erfahrenes Mitglied
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>
 

akdesign

Erfahrenes Mitglied
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>
 

Sempervivum

Erfahrenes Mitglied
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?
 
Zuletzt bearbeitet:

akdesign

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Das ging relativ einfach zu machen. Den Slideindex bei den a-href-Tags als data-Attribute hinzu gefügt:
HTML:
            <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:
Code:
            $("nav2 li a").each(function () {
                $(this).bind("click", function () {
                    var slideidx = $(this).attr("data-slideidx");
                    gotoSlide(slideidx);
                })
            });
 

akdesign

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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:
Code:
            $("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:
HTML:
            <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".
 
Zuletzt bearbeitet:

Forum-Statistiken

Themen
272.363
Beiträge
1.558.641
Mitglieder
187.836
Neuestes Mitglied
MMazi