1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Bildgalerie mit Farbwechsel im Menü

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von akdesign, 18. April 2017.

  1. akdesign

    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:
    1. <!doctype html>
    2.  
    3. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    4.  
    5. <link href="style.css" rel="stylesheet">
    6. <link href="slideshow.css" rel="stylesheet" type="text/css"/>
    7.  
    8. <script type="text/javascript" src="js/jquery.min.js"></script>
    9. <script type="text/javascript">
    10.  
    11. $(document).ready(function(){
    12.   var currentPosition = 0;
    13.   var slideWidth = 1050;
    14.   var slides = $('.slide');
    15.   var numberOfSlides = slides.length;
    16.  
    17.   // Remove scrollbar in JS
    18.   $('#slideContainer').css('overflow', 'hidden');
    19.  
    20.   // Wrap all .slides with #slideInner div
    21.   slides
    22.     .wrapAll('<div id="slideInner"></div>')
    23.     // Float left to display horizontally, readjust .slides width
    24.     .css({
    25.       'float' : 'left',
    26.       'width' : slideWidth
    27.     });
    28.  
    29.   // Set #slideInner width equal to total width of all slides
    30.   $('#slideInner').css('width', slideWidth * numberOfSlides);
    31.  
    32.   // Insert controls in the DOM
    33.   $('#slideshow')
    34.     .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    35.     .append('<span class="control" id="rightControl">Clicking moves right</span>');
    36.  
    37.   // Hide left arrow control on first load
    38.   manageControls(currentPosition);
    39.  
    40.   // Create event listeners for .controls clicks
    41.   $('.control')
    42.     .bind('click', function(){
    43.     // Determine new position
    44.     currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    45.    
    46.     // Hide / show controls
    47.     manageControls(currentPosition);
    48.     // Move slideInner using margin-left
    49.     $('#slideInner').animate({
    50.       'marginLeft' : slideWidth*(-currentPosition)
    51.     });
    52.   });
    53.  
    54.   // manageControls: Hides and Shows controls depending on currentPosition
    55.   function manageControls(position){
    56.     // Hide left arrow if position is first slide
    57.     if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    58.     // Hide right arrow if position is last slide
    59.     if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    60.   }  
    61. });
    62.  
    63.  
    64.  
    65. <script type="text/javascript">
    66.     function farbe ()    {
    67.     document.getElementById("text1").style.color='#fff';
    68.     }
    69.  
    70.  
    71.  
    72. <!--
    73. <script language="javascript">
    74.        function setVisibility()
    75.        {
    76.            var val = document.getElementById('president_rezeptheft');
    77.  
    78.            if (val == 'broschueren')
    79.            {
    80.                document.getElementById("text1").style.color='#fff';
    81.            }
    82.        }
    83. </script>
    84.  
    85.  
    86.  
    87. <script type="text/javascript">
    88.    var Bild = ("broschueren")
    89. </script>
    90.  
    91.  
    92. <script type="text/javascript">
    93.    var rezeptheft = document.getElementById("president_rezeptheft");
    94.  
    95.    if (rezeptheft !== "visible" )
    96. {
    97.    alert("Das Bild wurde nicht korrekt geladen!");
    98. }
    99.  
    100.    function menu ()    {
    101.        if ("president_rezeptheft") =
    102.    document.getElementById("president_rezeptheft");
    103.    }
    104. </script>
    105.  
    106. <script language="javascript">
    107.        function setVisibility()
    108.        {
    109.            var val = document.getElementById('president_rezeptheft');
    110.  
    111.            if (val == 'president_rezeptheft')
    112.            {
    113.                document.getElementById("text1").style.color='#fff';
    114.            }
    115.        }
    116. </script> -->
    117.  
    118. </head>
    119.  
    120. <body >
    121.  
    122.     <div id="wrapper">
    123.    
    124.         <header><img src="images/logo.png" class="logo"></header>
    125.        
    126.         <main><!--<img src="images/background.jpg">-->
    127.        
    128.  
    129.        
    130.         <nav2>
    131.             <ul>
    132.                 <li><a href="#">Anzeigen</a></li>
    133.                 <li class="linie">&nbsp;|&nbsp;</li>
    134.                 <li><a href="#broschueren" id="text1">Broschüren</a></li>
    135.                 <li class="linie">&nbsp;|&nbsp;</li>
    136.                 <li><a href="#broschueren">Sales Support</a></li>
    137.                 <li class="linie">&nbsp;|&nbsp;</li>
    138.                 <li><a href="#">Newsletter</a></li>
    139.             </ul>
    140.         </nav2>
    141.        
    142.        
    143.        
    144.         <div id="galerie">
    145.        
    146.             <!-- Slideshow HTML -->
    147.             <div id="slideshow">
    148.                 <div id="slideContainer">
    149.                     <div class="slide">
    150.                     <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
    151.                     <img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
    152.                         <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>
    153.                     </div>
    154.                        <div class="slide">
    155.                     <img src="slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;"/>
    156.                         <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Groupama</strong><br>
    157.                          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>
    158.                     </div>
    159.                     <div class="slide">
    160.                     <img src="slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;"/>
    161.                         <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Galeries Lafayette</strong><br>
    162.                          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>
    163.                     </div>
    164.                  
    165.                       <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>
    166.                         <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
    167.                          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>
    168.                   </div>
    169.                  
    170.                  
    171.                  </div>
    172.             </div>
    173.             <!-- Slideshow HTML -->  
    174.    
    175.         </div>
    176.          
    177.         </main>
    178.    
    179.     </div>
    180.    
    181. </body>
    182. </html>

    Code (CSS):
    1. @charset "UTF-8";
    2. /* CSS Document */
    3.  
    4. html, body {
    5.     background-color: #00131b;
    6.     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    7.     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*/
    8.     line-height: 130%;
    9.     border-width: 0px;
    10.     font-style: normal;
    11.     /*color: aqua;*/
    12. }
    13.  
    14. #wrapper    {
    15.     margin-left: auto; /*mittig setzen*/
    16.     margin-right: auto;
    17.     max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    18.     height: 830px;
    19.     /*background-color: aqua;*/
    20. }
    21.  
    22. header    {
    23.     width: 100%;
    24.     height: 12.048193%;
    25.     /*background-color: antiquewhite;*/
    26. }
    27.  
    28. .logo    {
    29.     float: right;
    30.     padding: 1.8% 0px 0px 0px;
    31.     height: 69%;
    32. }
    33.  
    34. main    {
    35.     background-image: url(images/background.jpg);
    36.     background-repeat: no-repeat;
    37.     max-width:100%;
    38.     height: 79.518072%;
    39.     /*background-color:blueviolet;*/
    40. }
    41.  
    42. #galerie    {
    43.     /*background-color: chartreuse;*/
    44.     background-image: url(images/wrapper.jpg);
    45.     background-repeat: no-repeat;
    46.     max-width: 1050px;
    47.     width: 100%;
    48.     height: 500px;
    49.     position: relative;
    50.     top: 100px;
    51. }
    52.  
    53. .linie_fig {
    54.     color: #990000;
    55.     font-weight: bold;
    56.     padding: 0px 5px 0px 0px;
    57.     font-size: 130%;
    58.     vertical-align: 20%;
    59. }
    60.  
    61.  
    62.  
    63. /*Navi oben*/
    64.  
    65. nav2 {
    66.     position: absolute;
    67.     width: 1050px;
    68. }
    69.  
    70.  
    71. nav2 ul     {
    72.     list-style: none;
    73.     border: 0;
    74.     /*background-color: aqua;*/
    75.     float: right;
    76.     margin: 70px 0px 0px 0px;
    77. }
    78.  
    79. nav2 li     {
    80.     display: inline;
    81. }
    82.  
    83. nav2 a     {
    84.     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    85.     font-size: 100%;
    86.     color: #6b7b87;
    87.     text-decoration: none;
    88.     font-weight: normal;
    89.    
    90. }
    91.  
    92. nav2 a:hover     {
    93.     color: #fff;
    94. }
    95.  
    96. nav2:active     {
    97.     color: #fff;
    98. }
    99.  
    100. .linie {
    101.     color: #990000;
    102.     font-weight: bold;
    103. }
    104.  
    105.  
    106.  
    107.  
    108. /**
    109. * Slideshow style rules.
    110. */
    111.  
    112. #content.slide {
    113.       margin:0 auto;
    114.     width:93px;
    115.     height:450px;
    116.     display: flex;  /*für vertikale Zentrerung*/
    117.       align-items: center; /*für vertikale Zentrerung*/
    118.     /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
    119.     /*background-color: aquamarine;*/
    120. }
    121.  
    122.  
    123. #slideshow {
    124.     width: 1050px;
    125.     margin: 0;
    126.     padding: 0;
    127.     height:500px;
    128.     z-index:10;
    129.     position: absolute;
    130.     /*background-color:#fff;*/
    131. }
    132.  
    133.  
    134. #slideContainer {
    135.     overflow: hidden;
    136.     width: 930px;
    137.     height: 500px;
    138.     position: absolute;
    139.     margin: 30px 0px 0px 60px;
    140.     /*background-color: antiquewhite;*/
    141. }
    142.  
    143.  
    144. .slide {
    145.       margin:0 auto;
    146.     width:93px;
    147.     height:450px;
    148.     display: flex;  /*für vertikale Zentrerung*/
    149.       align-items: center; /*für vertikale Zentrerung*/
    150.     /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
    151.     /*background-color: aquamarine;*/
    152. }
    153.  
    154.  
    155.  
    156. figcaption {
    157.     position: relative;
    158.     width: 350px;
    159.     height:400px;
    160.     /*background-color: aquamarine;*/
    161.     color: #666;
    162. }
    163.  
    164. .slide:nth-child(1) figcaption {
    165.     margin: 80px 0px 0px 300px;
    166.     position: absolute;
    167. }
    168.  
    169. .slide:nth-child(2) figcaption {
    170.     margin: 110px 0px 0px 100px;
    171.     position: absolute;
    172.    
    173. }
    174.  
    175. .slide:nth-child(3) figcaption {
    176.     margin: 50px 0px 0px 200px;
    177.     position: absolute;
    178. }
    179.  
    180. .slide:nth-child(4) figcaption {
    181.     margin: 150px 0px 0px 400px;
    182.     position: absolute;
    183. }
    184.  
    185.  
    186. /**
    187. * Slideshow controls style rules.
    188. */
    189. .control {
    190.   display:block;
    191.   width:40px;
    192.   height:348px;
    193.   text-indent:-10000px;
    194.   position:absolute;
    195.   cursor: pointer;
    196.       /* Transparenter Hintergrund:
    197.   filter:alpha(opacity=8); /* IE
    198.   opacity:0.8; /* allgemein
    199.   -moz-opacity:0.8; /* Mozilla
    200.   -khtml-opacity:0.8; /* KTHML
    201.   -opera-opacity:0.8; /* Opera
    202.     */
    203.   z-index: 99;
    204. }
    205.  
    206.  
    207. #leftControl {
    208.   top:200px;
    209.   left:20px;
    210.   background:url(images/pfeil_links.gif) no-repeat 0 0;
    211. }
    212.  
    213. #rightControl {
    214.   top:200px;
    215.   right:0;
    216.   background:url(images/pfeil_rechts.gif) no-repeat 0 0;
    217. }
     
  2. Sempervivum

    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 (Text):
    1.   // Create event listeners for .controls clicks
    2.   $('.control')
    3.     .bind('click', function(){
    4.     var posChangeColor = 3;
    5.     // Determine new position
    6.     currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    7.     if (currentPosition == posChangeColor) {
    8.         document.getElementById("id-des-umzufaerbenden-Elementes").style.color = "red";
    9.     }
    10.     // Hide / show controls
    11.     manageControls(currentPosition);
    12.     // Move slideInner using margin-left
    13.     $('#slideInner').animate({
    14.       'marginLeft' : slideWidth*(-currentPosition)
    15.     });
    16.   });
     
  3. akdesign

    akdesign Erfahrenes Mitglied

    Ok, das ist doch schon ein deutlicher Schritt.

    Ich habe das jetzt so eingebunden:
    Code (Text):
    1.   // Create event listeners for .controls clicks
    2.   $('.control')
    3.     .bind('click', function(){
    4.       var posChangeColor = 3;
    5.     // Determine new position
    6.     currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    7.        if (currentPosition == posChangeColor) {
    8.         document.getElementById("text1").style.color = '#fff';
    9.    
    10.     // Hide / show controls
    11.     manageControls(currentPosition);
    12.     // Move slideInner using margin-left
    13.     $('#slideInner').animate({
    14.       'marginLeft' : slideWidth*(-currentPosition)
    15.     });
    16.   });
    Allerdings verschwinden dann die Controls.

    Wenn ich
    Code (Text):
    1.  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?
     
  4. Sempervivum

    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 (Text):
    1.  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.
     
  5. akdesign

    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.
     
  6. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Das verstehe ich noch nicht vollständig:
    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.
    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.
     
  7. akdesign

    akdesign Erfahrenes Mitglied

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

    Sempervivum Erfahrenes Mitglied

    OK, dann weiß ich jetzt, wie es sein soll. Ich werde etwas ausarbeiten.
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Das war relativ einfach.

    HTML:
    1.             <nav2>
    2.                 <ul>
    3.                     <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
    4.                     <li class="linie">&nbsp;|&nbsp;</li>
    5.                     <li><a href="#broschueren" id="text1">Broschüren</a></li>
    6.                     <li class="linie">&nbsp;|&nbsp;</li>
    7.                     <li><a id="menuitem3" href="#broschueren">Sales Support</a></li>
    8.                     <li class="linie">&nbsp;|&nbsp;</li>
    9.                     <li><a href="#">Newsletter</a></li>
    10.                 </ul>
    11.             </nav2>
    12.  
    13.  
    14.  
    15.             <div id="galerie">
    16.  
    17.                 <!-- Slideshow HTML -->
    18.                 <div id="slideshow">
    19.                     <div id="slideContainer">
    20.                         <div class="slide" data-menuitem="menuitem1">
    21.                             <img src="images/dia0.jpg" width="243" height="311" border="0" style="margin-left: 30px;" />
    22.                             <img src="images/dia1.jpg" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;" />
    23.                             <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>
    24.                         </div>
    25.                         <div class="slide">
    26.                             <img src="images/dia2.jpg" width="215" height="280" border="0" style="margin-left: 500px;" />
    27.                             <figcaption>
    28.                                 <span class="linie_fig">|</span>&nbsp;<strong>Groupama</strong><br>
    29.                                 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.
    30.                             </figcaption>
    31.                         </div>
    32.                         <div class="slide" data-menuitem="menuitem3">
    33.                             <img src="images/dia3.jpg" width="117" height="350" border="0" style="margin-left: 600px;" />
    34.                             <figcaption>
    35.                                 <span class="linie_fig">|</span>&nbsp;<strong>Galeries Lafayette</strong><br>
    36.                                 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.
    37.                             </figcaption>
    38.                         </div>
    39.  
    40.                         <div class="slide" id="broschueren">
    41.                             <a href="#"><img src="images/dia3.jpg" width="331" height="242" border="0" style="margin-left: 30px;" /></a>
    42.                             <figcaption>
    43.                                 <span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
    44.                                 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.
    45.                             </figcaption>
    46.                         </div>
    47.  
    48.  
    49.                     </div>
    50.                 </div>
    51.                 <!-- 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 (Text):
    1.             // Create event listeners for .controls clicks
    2.             $('.control')
    3.               .bind('click', function () {
    4.                   previousPosition = currentPosition;
    5.                   // Determine new position
    6.                   currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
    7.  
    8.                   var prevID = slides.eq(previousPosition).data("menuitem");
    9.                   if (prevID) $("#" + prevID).removeClass("active");
    10.                   var currID = slides.eq(currentPosition).data("menuitem");
    11.                   if (currID) $("#" + currID).addClass("active");
    12.  
    13.                   // Hide / show controls
    14.                   manageControls(currentPosition);
    15.                   // Move slideInner using margin-left
    16.                   $('#slideInner').animate({
    17.                       'marginLeft': slideWidth * (-currentPosition)
    18.                   });
    19.               });
    Beim alten Element wird die Klasse "active" gelöscht und beim neuen gesetzt. Die Farbänderung kannst Du dann mit CSS machen:
    Code (CSS):
    1.                     nav2 a {
    2.                         font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    3.                         font-size: 100%;
    4.                         color: #6b7b87;
    5.                         text-decoration: none;
    6.                         font-weight: normal;
    7.                     }
    8.                     nav2 a.active {
    9.                         color: red;
    10.                     }
     
  10. akdesign

    akdesign Erfahrenes Mitglied

    Für Dich schon ;)

    OK, cool, danke mal soweit.
    Ich schau mir das in Ruhe an; möchte es ja auch nachvollziehen und kapieren.
     
  11. akdesign

    akdesign Erfahrenes Mitglied

    Hmmm…… geht noch nicht.

    1. Menüpunkt bleibt active und es gibt keinen Wechsel auf 2. active menüpunkt
     
  12. Sempervivum

    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.
     
  13. akdesign

    akdesign Erfahrenes Mitglied

  14. Sempervivum

    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 (Text):
    1.             // Create event listeners for .controls clicks
    2.             $('.control')
    3.               .bind('click', function () {
    4.                   previousPosition = currentPosition;
    5.                   // Determine new position
    6.                   currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
    7.  
    8.                   var prevID = slides.eq(previousPosition).attr("data-menuitem");
    9.                   if (prevID) $("#" + prevID).removeClass("active");
    10.                   var currID = slides.eq(currentPosition).attr("data-menuitem");
    11.                   if (currID) $("#" + currID).addClass("active");
    12.  
    13.                   // Hide / show controls
    14.                   manageControls(currentPosition);
    15.                   // Move slideInner using margin-left
    16.                   $('#slideInner').animate({
    17.                       'marginLeft': slideWidth * (-currentPosition)
    18.                   });
    19.               });
     
  15. akdesign

    akdesign Erfahrenes Mitglied

    Ok, habe gerade die aktuelle jQuery Version installiert.

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

    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 (Text):
    1.     // onClick auf Menüpunkt
    2.     function farbe ()    {
    3.         document.getElementById("menuitem2").style.color='#fff';
    4.         for(i=0;i<=document.getElementsByClassName("active").length;i++) {
    5.         document.getElementsByClassName("active")[i].style.color='#6b7b87';
    6.   }  
    7. }
    8.  
    9.     function farbe1 ()    {
    10.         var hinweis = document.getElementById("menuitem1").style.color='#fff';
    11.         for(i=0;i<=document.getElementsByClassName("normal").length;i++) {
    12.         document.getElementsByClassName("normal")[i].style.color='#6b7b87';
    13.    }  
    14. }
    HTML:
    1.         <nav2>
    2.              <ul>
    3.                 <li><a id="menuitem1" class="active" href="#anzeigen" onClick="farbe1()">Anzeigen</a></li>
    4.                 <li class="linie">&nbsp;|&nbsp;</li>
    5.                 <li><a id="menuitem2" href="#broschueren" onClick="farbe()" class="normal">Broschüren</a></li>
    6.                 <li class="linie">&nbsp;|&nbsp;</li>
    7.                 <li><a id="menuitem3" href="#">Sales Support</a></li>
    8.                 <li class="linie">&nbsp;|&nbsp;</li>
    9.                 <li><a id="menuitem4" href="#">Newsletter</a></li>
    10.              </ul>
    11.         </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 (Text):
    1.   // Create event listeners for .controls clicks
    2.             $('.control')
    3.               .bind('click', function () {
    4.                   previousPosition = currentPosition;
    5.                   // Determine new position
    6.                   currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
    7.                   var prevID = slides.eq(previousPosition).data("menuitem");
    8.                   if (prevID) $("#" + prevID).removeClass("active");
    9.                   var currID = slides.eq(currentPosition).data("menuitem");
    10.                   if (currID) $("#" + currID).addClass("active");
    11.        
     
  17. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Verstehe ich mal wieder nicht so richtig:
    Code (Text):
    1. 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.
     
  18. akdesign

    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.

    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.
     
  19. Sempervivum

    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:
    1.             <nav2>
    2.                 <ul>
    3.                     <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
    4.                     <li class="linie">&nbsp;|&nbsp;</li>
    5.                     <li><a id="text1">Broschüren</a></li>
    6.                     <li class="linie">&nbsp;|&nbsp;</li>
    7.                     <li><a id="menuitem3">Sales Support</a></li>
    8.                     <li class="linie">&nbsp;|&nbsp;</li>
    9.                     <li><a href="#">Newsletter</a></li>
    10.                 </ul>
    11.             </nav2>
    Code (Text):
    1.     <script type="text/javascript">
    2.  
    3.         $(document).ready(function () {
    4.             var currentPosition = 0;
    5.             var slideWidth = 1050;
    6.             var slides = $('.slide');
    7.             var numberOfSlides = slides.length;
    8.  
    9.             // Remove scrollbar in JS
    10.             $('#slideContainer').css('overflow', 'hidden');
    11.  
    12.             // Wrap all .slides with #slideInner div
    13.             slides
    14.               .wrapAll('<div id="slideInner"></div>')
    15.               // Float left to display horizontally, readjust .slides width
    16.               .css({
    17.                   'float': 'left',
    18.                   'width': slideWidth
    19.               });
    20.  
    21.             // Set #slideInner width equal to total width of all slides
    22.             $('#slideInner').css('width', slideWidth * numberOfSlides);
    23.  
    24.             // Insert controls in the DOM
    25.             $('#slideshow')
    26.               .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    27.               .append('<span class="control" id="rightControl">Clicking moves right</span>');
    28.  
    29.             // Hide left arrow control on first load
    30.             manageControls(currentPosition);
    31.  
    32.             // Create event listeners for .controls clicks
    33.             $('.control')
    34.               .bind('click', function () {
    35.                   // Determine new position
    36.                   var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
    37.                   gotoSlide(newPosition);
    38.               });
    39.  
    40.             $("nav2 li a").each(function (idx) {
    41.                 $(this).bind("click", function () {
    42.                     gotoSlide(idx);
    43.                 })
    44.             });
    45.  
    46.             function gotoSlide(newPosition) {
    47.                 var previousPosition = currentPosition;
    48.                 currentPosition = newPosition;
    49.                 var prevID = slides.eq(previousPosition).attr("data-menuitem");
    50.                 if (prevID) $("#" + prevID).removeClass("active");
    51.                 var currID = slides.eq(currentPosition).attr("data-menuitem");
    52.                 if (currID) $("#" + currID).addClass("active");
    53.  
    54.                 // Hide / show controls
    55.                 manageControls(currentPosition);
    56.  
    57.                 // Move slideInner using margin-left
    58.                 $('#slideInner').animate({
    59.                     'margin-left': slideWidth * (-currentPosition)
    60.                 });
    61.             }
    62.  
    63.             // manageControls: Hides and Shows controls depending on currentPosition
    64.             function manageControls(position) {
    65.                 // Hide left arrow if position is first slide
    66.                 if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
    67.                 // Hide right arrow if position is last slide
    68.                 if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() }
    69.             }
    70.         });
    71.     </script>
     
  20. akdesign

    akdesign Erfahrenes Mitglied

    Hmmm……… ok. Leider stimmen die "Anker" nicht.

    Code (Text):
    1. <script type="text/javascript">
    2.  
    3. $(document).ready(function(){
    4.   var currentPosition = 0;
    5.   var slideWidth = 1050;
    6.   var slides = $('.slide');
    7.   var numberOfSlides = slides.length;
    8.  
    9.   // Remove scrollbar in JS
    10.   $('#slideContainer').css('overflow', 'hidden');
    11.  
    12.   // Wrap all .slides with #slideInner div
    13.   slides
    14.     .wrapAll('<div id="slideInner"></div>')
    15.     // Float left to display horizontally, readjust .slides width
    16.     .css({
    17.       'float' : 'left',
    18.       'width' : slideWidth
    19.     });
    20.  
    21.   // Set #slideInner width equal to total width of all slides
    22.   $('#slideInner').css('width', slideWidth * numberOfSlides);
    23.  
    24.   // Insert controls in the DOM
    25.   $('#slideshow')
    26.     .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    27.     .append('<span class="control" id="rightControl">Clicking moves right</span>');
    28.  
    29.   // Hide left arrow control on first load
    30.   manageControls(currentPosition);
    31.  
    32.  
    33.   // Create event listeners for .controls clicks
    34.             $('.control')
    35.               .bind('click', function () {
    36.                   // Determine new position
    37.                   var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
    38.                   gotoSlide(newPosition);
    39.               });
    40.             $("nav2 li a").each(function (idx) {
    41.                 $(this).bind("click", function () {
    42.                     gotoSlide(idx);
    43.                 })
    44.             });
    45.             function gotoSlide(newPosition) {
    46.                 var previousPosition = currentPosition;
    47.                 currentPosition = newPosition;
    48.                 var prevID = slides.eq(previousPosition).attr("data-menuitem");
    49.                 if (prevID) $("#" + prevID).removeClass("active");
    50.                 var currID = slides.eq(currentPosition).attr("data-menuitem");
    51.                 if (currID) $("#" + currID).addClass("active");
    52.                   // Hide / show controls
    53.                   manageControls(currentPosition);
    54.              
    55.                   // Move slideInner using margin-left
    56.                   $('#slideInner').animate({
    57.                       'marginLeft': slideWidth * (-currentPosition)
    58.                   });
    59.               }
    60.  
    61.   // manageControls: Hides and Shows controls depending on currentPosition
    62.   function manageControls(position){
    63.     // Hide left arrow if position is first slide
    64.     if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    65.     // Hide right arrow if position is last slide
    66.     if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    67.   }  
    68. });
    69.  
    70. </script>
    Die Navi
    HTML:
    1. <nav2>
    2.              <ul>
    3.                 <li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
    4.                 <li class="linie">&nbsp;|&nbsp;</li>
    5.                 <li><a id="menuitem2" href="#">Broschüren</a></li>
    6.                 <li class="linie">&nbsp;|&nbsp;</li>
    7.                 <li><a id="menuitem3" href="#ss">Sales Support</a></li>
    8.                 <li class="linie">&nbsp;|&nbsp;</li>
    9.                 <li><a id="menuitem4" href="#" >Newsletter</a></li>
    10.              </ul>
    11.         </nav2>
    Und die Slidshow:
    HTML:
    1. <div id="galerie">
    2.                 <!-- Slideshow HTML -->
    3.                 <div id="slideshow">
    4.                     <div id="slideContainer">
    5.                         <div class="slide" data-menuitem="menuitem1">
    6.                             <img src="images/slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
    7.                              <img src="images/slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
    8.                         <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>
    9.                       </div>
    10.                         <div class="slide" data-menuitem="menuitem1">
    11.                             <img src="images/slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;" />
    12.                             <figcaption>
    13.                                 <span class="linie_fig">|</span>&nbsp;<strong>Groupama</strong><br>
    14.                                 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.
    15.                             </figcaption>
    16.                         </div>
    17.                         <div class="slide" data-menuitem="menuitem1">
    18.                             <img src="images/slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;" />
    19.                             <figcaption>
    20.                                 <span class="linie_fig">|</span>&nbsp;<strong>Galeries Lafayette</strong><br>
    21.                                 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.
    22.                           </figcaption>
    23.                         </div>
    24.                         <div class="slide" data-menuitem="menuitem2">
    25.                             <img src="images/slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;" />
    26.                             <figcaption>
    27.                                 <span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
    28.                                 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.
    29.                           </figcaption>
    30.                         </div>
    31.                      
    32.                          <div class="slide" data-menuitem="menuitem2">
    33.                             <img src="images/slidebilder/sto.png" width="419" height="324" border="0" style="margin-left: 30px;" />
    34.                             <figcaption>
    35.                                 <span class="linie_fig">|</span>&nbsp;<strong>Sto Broschüre</strong><br>
    36.                                 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.
    37.                            </figcaption>
    38.                          </div>
    39.                      
    40.                          <div class="slide" data-menuitem="menuitem3">
    41.                             <img src="images/slidebilder/ates.png" width="470" height="320" border="0" style="margin-left: 350px;" />
    42.                             <figcaption>
    43.                                 <span class="linie_fig">|</span>&nbsp;<strong>ATES, Architektenordner</strong><br>
    44.                                 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.
    45.                            </figcaption>
    46.                           </div>
    47.                        
    48.                              <div class="slide" data-menuitem="menuitem3">
    49.                             <img src="images/slidebilder/mailing_sito_1.png" width="280" height="220" border="0" style="margin-left: 20px; margin-top: 70px;" />
    50.                             <img src="images/slidebilder/mailing_sito_2.png" width="360" height="320" border="0" style="margin-left: 300px;" />
    51.                             <figcaption>
    52.                                 <span class="linie_fig">|</span>&nbsp;<strong>Wilkhahn, Kick-off-Mailing Sito</strong><br>
    53.                                 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.
    54.                         </figcaption>
    55.                           </div>
    56.                        
    57.                           <div class="slide" data-menuitem="menuitem4">
    58.                             <img src="images/slidebilder/novartis.jpg" width="217" height="307" border="0" style="margin-left: 600px;" />
    59.                             <figcaption>
    60.                                 <span class="linie_fig">|</span>&nbsp;<strong>Novartis BPO</strong><br>
    61.                                 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.
    62.                           </figcaption>
    63.                          </div>
    64.                        
    65.                            <div class="slide" data-menuitem="menuitem4">
    66.                             <img src="images/slidebilder/toupret.png" width="310" height="290" border="0" style="margin-left: 50px;" />
    67.                             <figcaption>
    68.                                 <span class="linie_fig">|</span>&nbsp;<strong>Toupret</strong><br>
    69.                                 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.
    70.                         </figcaption>
    71.                           </div>
    72.                   </div>
    73.                 </div>
    74.                 <!-- Slideshow HTML -->
    75.  
    76.         </div>
     
Die Seite wird geladen...