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;
}
 
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)
    });
  });
 
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?
 
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.
 
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.
 
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.
 
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.
 
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;
                    }
 
Zurück