Ändern einer Hintergrundfarbe auf Grund von eingeblendetem Slidebild

S

sophia_nnn

Grünschnabel
Gelöst: Ändern einer Hintergrundfarbe auf Grund von eingeblendetem Slidebild

Hallo!
Ich habe bisher nichts mit Javascript zu tun gehabt, jedoch heute 4 Stunden lang Tutorials zu dem Thema angesehen.

Meine Problemstellung ist folgende:
Ich habe eine Slideshow die mehrere Bilder anzeigt. Auf der Webseite (Joomla CMS) ist ein Menü, welches seine Hintergrundfarbe, passend zu dem Slideshowbild ändern soll.

Mein Lösungsansatz:
Ich habe es geschafft dem Slide über einen kleinen Trick eine ID zu verpassen. Und zwar habe ich den Img-Alt-Tag der eine Variable ist, in den Slide reingebracht. Der Slide heißt nun z.B. <li id="suesses" style="z-index:20;"> der andere <li id="saures" style="z-index:18;">
Der jeweils aktive Slide hat den z-index 20.

Und meinem Menu habe ich die id "sweetmenu" gegeben.

Mein Javascript sieht nun so aus:
Javascript: 
 <script type="text/javascript">
				
				var suesses = document.getElementById('suesses').style.zIndex;
				var saures = document.getElementById('saures').style.zIndex;

				if (suesses = "20") {
					document.getElementById('sweetmenu').style.backgroundColor = '#00ff00';
					}
				if (saures = "20") {
					document.getElementById('sweetmenu').style.backgroundColor = '#0000ff';
					}
				
</script>
Mein Problem ist nun, dass dass der Menuhintergrund den zweiten Wert annimmt und dann auch so bleibt. Auch wenn sich der z-index der Slides immerwieder ändert. Wahrscheinlich habe ich einfach nur falsch gedacht. Hat jemand eine Idee für mich wie ich "weiterdenken" könnte?

Der Slider ist der Unite Revolution Slider für Joomla und das Menü ist ein ganz normales Menü...

Danke

Sophia
 
Zuletzt bearbeitet:
Ich lese gerade nur am Smartphone, deshalb ist es etwas schwierig.
Was auf jeden Fall falsch ist, sind die Gleichheitszeichen in der jew. IF-Anweisung.
Du hast nur eines und das ist eine Wertzuweisung.

Zum Vergleichen müssen es zwei sein "=="!

Wenn entweder "suesses" oder "saures" den z-index 20 hat, dann reicht es auch wenn du nur einen der beiden Werte prüfst.

Javascript: 
var suesses = document.getElementById('suesses').style.zIndex;

if (suesses == "20") {
    document.getElementById('sweetmenu').style.backgroundColor = '#00ff00';
} else {
    document.getElementById('sweetmenu').style.backgroundColor = '#0000ff';
}
 
Zuletzt bearbeitet:
Hallo!

@strukturart
Die Lösung per Button geht leider nicht, da die Slideshow ja automatisch abläuft - ohne Steuerung.

@tombe Den Code habe ich gemäß deinem Beispiel abgeändert aber es bleibt bei der zweiten angegebenen Farbe, ich denke weil es nichts gibt dass dem Code sagt dass sich was geändert hat.

Wie geht´s jetzt für mich weiter? Muss ich irgendwie per Schleife prüfen welche Bedingung gerade aktiv ist oder kann ich in die einzelnen Slides irgendeine Art Trigger einbauen?

Danke schonmal für Eure Antworten, das alles lernen ist die eine Sache, aber jemanden fragen dürfen ist Gold wert!
 
Kann man sich den kompletten Code irgendwo mal anschauen?

...ich denke weil es nichts gibt dass dem Code sagt dass sich was geändert hat...
Zum Vergrößern anklicken....
Ich denke der obige Code steht dort wo du den z-index Wert änderst!?
 
Zuletzt bearbeitet:
Leider Nein, habe ich lokal auf dem Rechner.
Hier ein Auszug aus der Slideshow:
Javascript: 
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper" style="margin:0px auto;background-color:#fff;padding:0px;margin-top:0px;margin-bottom:0px;direction:ltr;">
					<div id="rev_slider_1_1" class="rev_slider" style="display:none;">						
										<ul>
								
            
					<li id="suesses" data-transition="fade"  data-slotamount="7"  data-masterspeed="300"  > 
					    
						<img src="/sweet/index.php?option=com_uniterevolution&task=showimage&img=aW1hZ2VzL3NsaWRlcy9zd2VldC5qcGc=&w=800&h=350&t=exact" alt="suesses" />
						
											</li>
                  
									
            
					<li id="saures" data-transition="fade"  data-slotamount="7"  data-masterspeed="300"  > 
					    
						<img src="/sweet/index.php?option=com_uniterevolution&task=showimage&img=aW1hZ2VzL3NsaWRlcy90aW5zLmpwZw==&w=800&h=350&t=exact" alt="saures" />
						
											</li>
                        <script type="text/javascript">
				
				var suesses = document.getElementById('suesses').style.zIndex;
				var saures = document.getElementById('saures').style.zIndex;

				if (suesses == "20") {
					document.getElementById('sweetmenu').style.backgroundColor = '#00ff00';
					} 
					
				else {
					document.getElementById('sweetmenu').style.backgroundColor = '#0000ff';
					}
				
				</script>
								</ul>
														</div>
				</div>
							
			<script type="text/javascript">
				
				var tpj=jQuery;
				
				
				var revapi1;
				
				tpj(document).ready(function() {
				
				if (tpj.fn.cssOriginal != undefined)
					tpj.fn.css = tpj.fn.cssOriginal;
				
				if(tpj('#rev_slider_1_1').revolution == undefined)
					revslider_showDoubleJqueryError('#rev_slider_1_1',"joomla");
				else	
					revapi1 = tpj('#rev_slider_1_1').show().revolution(
					 {
						delay:9000,
						startwidth:800,
						startheight:350,
						hideThumbs:200,
						
						thumbWidth:100,
						thumbHeight:50,
						thumbAmount:2,
						
						navigationType:"none",
						navigationArrows:"verticalcentered",
						navigationStyle:"round-old",
						
						touchenabled:"on",
						onHoverStop:"off",
						
						shadow:0,
						fullWidth:"off",

						navigationHAlign:"center",
						navigationVAlign:"center",
						navigationHOffset:0,
						navigationVOffset:20,
								
						stopLoop:"off",
						stopAfterLoops:-1,
						stopAtSlide:-1,
								
						shuffle:"off",
						
						hideSliderAtLimit:0,
						hideCaptionAtLimit:0,
						hideAllCaptionAtLilmit:0					});
				
				});	//ready
				
			</script>
			
							<!-- END REVOLUTION SLIDER -->
Das ist die Datei von der Slideshow. In der Zeile 383 steht das "li" das den Slide ausgibt...

lg

Sophia

Ich kann wohl auf eine API zugreifen und diese Funktion nutzen:
revapi1.revcurrentslide();

damit bekomme ich die ID des aktuellen Slides.

Und wie nutzt man eine solche API?

Habt ihr einen Hinweis für mich?
schreibe ich dann was in die Klammern? Und wenn ja was?

liebe Grüße
Sophia
 

Anhänge

  • output.class.zip
    7,3 KB · Aufrufe: 3
Zuletzt bearbeitet von einem Moderator:
Gibt es den nirgends eine Seite wo der Slider beschrieben wird. Dort muss es ja eine Funktion geben die man für deine Zwecke "missbrauchen" kann.

Hab mir den Code zwar angeschaut aber ich muss zugeben das ich ein bisschen überfragt bin.
 
Ist das dieser Slider:
http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
? Egal ob ja oder nein, zu deinem Slider muss es doch eine Dokumentation geben. Meistens gibt es Callbackfunktionen, die u. a. aufgerufen werden, wenn das Bild gewechselt hat. Darin kannst Du dann deinen Farbwechsel erledigen.
Edit: Sehe gerade, dass Du ja oben gepostet hattest, um was für einen Slider es sich handelt. Leider kann ich in der Doku nichts über Callback-Funktionen finden. Da muss man wahrscheinlich in den Programmcode einsteigen. Poste doch mal einen Link zu der js-Datei des Sliders.
Edit2: Einfacher als nach einer Callback-Funktion zu suchen, ist wahrscheinlich, den z-Index zu pollen:
Code: 
window.setInterval(function() {
                var suesses = document.getElementById('suesses').style.zIndex;
                var saures = document.getElementById('saures').style.zIndex;
 
                if (suesses == "20") {
                    document.getElementById('sweetmenu').style.backgroundColor = '#00ff00';
                    } 
                    
                else {
                    document.getElementById('sweetmenu').style.backgroundColor = '#0000ff';
                    }
                }, 200);
 
Zuletzt bearbeitet:
Hallo zusammen, danke für Eure bisherige Hilfe. Ich bin jetzt über die Sliderdoku auf folgende Lösung gekommen:
HTML: 
function doSliderAPI(){
  
  
revapi1.bind("revolution.slide.onchange",function (e,data) {
  
var getslide = revapi1.revcurrentslide();
function menucolor () {
  if (getslide == 1) {
    document.getElementById('sortiment').style.backgroundColor = '#f8a81e';
  } 
  
  if (getslide == 2) {
    document.getElementById('sortiment').style.backgroundColor = '#2c8563';
  } 
  
   if (getslide == 3) {
    document.getElementById('sortiment').style.backgroundColor = '#961353';
  } 
  
     if (getslide == 4) {
    document.getElementById('sortiment').style.backgroundColor = '#b0b55a';
  } 
  
     if (getslide == 5) {
    document.getElementById('sortiment').style.backgroundColor = '#73c1d3';
  } 
  
   if (getslide == 6) {
    document.getElementById('sortiment').style.backgroundColor = '#6d9faa';
  } 
  
   if (getslide == 7) {
    document.getElementById('sortiment').style.backgroundColor = '#a56551';
  } 
  
   if (getslide == 8) {
    document.getElementById('sortiment').style.backgroundColor = '#dc7725';
  } 
    
    if (getslide == 9) {
    document.getElementById('sortiment').style.backgroundColor = '#b77f4d';
  } 
  
  else {
    document.getElementById('sortiment').style.backgroundColor = '#f8a81e';
  } 
    
}
menucolor ();


});

}
setTimeout(doSliderAPI,1000);
doSliderAPI();

Funktionieren tut es zwar, aber irgendwie erst nach über 5 Sekunden...
Hab ich das gut geschrieben oder gibt es noch eine schönere Lösung als so viele ifs?

Liebe Grüße
 
Ist ja super, dann hast Du doch eine Callback-Funktion gefunden!
Ja, zu den vielen ifs gibt es eine einfachere Alternative und zwar das switch-Statement:
http://de.selfhtml.org/javascript/sprache/bedingt.htm#switch
Dort am besten die Farbe in einer Variablen speichern und erst am Schluss mit getElementById zuweisen.
Dass es fünf Sekunden dauert, liegt wahrscheinlich daran, dass die Callback-Funktion erst beim Bildwechsel aufgerufen wird. Wenn Du das vermeiden willst, ist es am besten, wenn Du die Anweisungen für die Zuweisung der Farbe in eine zweite Funktion schreibst und diese gleich beim Seitenaufruf aufrufst. Dabei das onload-Event benutzen:
http://forum.de.selfhtml.org/archiv/2009/6/t188270/
Viel Erfolg und viele Grüße - Ulrich
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück