Hintergund wechseln per JQuery

fredolin

Erfahrenes Mitglied
Hallo JS-Family,

ich habe mal wieder ein kleines Problem mit jQuery und dem wechseln von Hintergrundbildern.

hier mal mein CSS Code
CSS:
.headslider	{margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_01.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider0	{margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_02.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider1	{margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_03.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider2	{margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_04.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider3	{margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_05.jpg);background-repeat:no-repeat;background-position:center top;}

Javascript:
$('.imageclick').click(function() {
 var picNo = $(this).attr('id');
 //alert(picNo);
$('#header').addClass('headslider'+ picNo);
});
	
$('.logo').click(function() {
$('#header').addClass('headslider');
});

HTML:
<div id="header" class="headslider"></div>

<div class="header">
	<div class="logo"></div>
	<div class="miniSlider opacity75 radius24">
		<div class="smallSlider_show">
			<div class="smallSlider_control">
				<div class="control_left">&laquo;</div>
				<div class="control_right">&raquo;</div>
			</div>
			<div class="pos_smallSliderBox">
				<div class="smallSlider_box">
					<!-- Start Pic 01 //-->
					<div class="smallSlider_img">
					<img src="img/headslider/mini_slider_head/mini_slider_pic01.png" width="123" height="90" alt="webslay.de - Webdesign und Layout - Bildslider" title="webslay.de - Webdesign und Layout - Bildslider" border="0" id="0" class="imageclick" />
					</div>
					<!-- End Pic 01 //-->
								
					<!-- Start Pic 02 //-->
					<div class="smallSlider_img">
					<img src="img/headslider/mini_slider_head/mini_slider_pic02.png" width="123" height="90" alt="webslay.de - Webdesign und Layout - Bildslider" title="webslay.de - Webdesign und Layout - Bildslider" border="0" id="1" class="imageclick" />
					</div>
					<!-- End Pic 02 //-->
					 usw....
			</div>
		</div>
	</div>
</div>

Probleme sind:
wenn man die Reihe nach die Bilder im Slider anklickt, dann funktioniert es. Aber wenn man dann wieder zurück oder durch einander die Bilder anklickt, dann das Hintergrundbild nicht geladen.

Auf das Logo habe ich das Script für das Zurücksetzen des Hintergrundbildes gelegt.

Auf meiner Webseite http://www.webslay.de könnt Ihr das Problem euch anschauen.
 
Zuletzt bearbeitet von einem Moderator:
1) Bei den ganzen Tabulatoren die du im HTML Code hast, kann man aber auch gar nicht lesen ohne zu scrollen.

2) Ich war auf deiner Seite. Aber ich frage mich trotzdem was für ein Problem du hast, denn direkt sehen tut man dort nichts.

Bearbeite bitte deinen Code so das er besser zu lesen ist und beschreibe um was für ein Problem es sich genau handelt bzw. was nicht so klappt wie es soll.
 
Hallo tombe,

erstmal Danke für deine Antwort.

das Einrücken habe ich versucht zu verbesser, was im HTML Code steht. Aber ganz ohne einrücken geht es nicht, weil dann der Code zu unübersichtlich wird.

Ich denke die beiden Code-Abschnitte CSS und JS kann man gutlesen.

SO was für Probleme macht das Script.

Ich habe im Header ein großes Bild, was der Besucher durch anklicken auf die Bilderleiste, die ebenfalls im Header ist, ändern kann. Über Sinn oder Nullsinn will ich hier nun nicht diskutieren..:).
Klickt man auf das 1 Bild dann das 2 Bild usw. dann werden die Bilder geladen. Klickt man aber Bild 1 und scrollt dann weiter zu Bild 3 und dann zurück zu Bild 1 und klickt dieses noch mal an, dann wird das Bild1 nicht im Hintergrund geladen. Warum nicht?

Was ich auch nicht verstehe ist, wenn ich auf das Logo klicke, dann sollte die grad geladene CSS CLasse durch die Standard CSS Classe ersetzt werden

Javascript:
$('.logo').click(function() {
  $('#header').addClass('headslider');
});
Was aber auch nicht passiert. Warum nicht?
Ich bin zwar kein Ass in JS und jQuery aber denke das ich da nur ein Denkfehler gemacht habe.
Ich hoffe ich habe nun die beiden Probleme so gut wie es geht Beschrieben und Ihr könnt mir da helfen.

Ich bedanke mich schon im Voraus für Eure Mithilfe

Gruß Fredolin
 
Zuletzt bearbeitet von einem Moderator:
Was ich im Code sehe ist das du per addClass beim Anklicken jeweils die entsprechende Klasse lädst.

Aber was passiert mit der Klasse die bereits vorhanden ist? Diese wird nicht gelöscht!

Primitiv sieht es dann so aus:

HTML:
<!-- 1. Aufruf -->
<div class="klasse1">bla bla bla</div>

<!-- 2. Aufruf -->
<div class="klasse1" class="klasse2">bla bla bla</div>

<!-- 3. Aufruf -->
<div class="klasse1" class="klasse2" class="klasse3">bla bla bla</div>

Beim ersten Aufruf wird dieKlasse 1 hinzugefügt und es dann auch so angezeigt. Beim zweiten Aufruf wird Klasse 2 zusätzlich aufgenommen und auch angezeigt da sie ja auch an zweiter Stelle steht, das passiert auch beim dritten Aufruf.

Klickst du dann aber wieder auf 2 bleibt die dritte Klasse erhalten und da sie in der Reihenfolge als letzte steht, überschreibt sie alles andere!

Wie es funktionieren könnte, siehst du hier.
 
Hallo Tombe,

ich danke dir. es klappt alles super... da ich noch nicht lange mit jQuery und so zu tunhabe hab ich da wohl noch einiges zum lernen vor mir. aber ich bedanke mich bei dir das du mir geholfen hast..

danke
 
Zurück