Bildergalerie mit Weiter/Zurück

theLIX · 1 Juli 2015

Hallo,
ich habe für meine Website eine Bildergalerie gebaut. Die Bilder vergrößern sich beim anklicken und es soll zwei Knöpfe für weiter und zurück geben. Zudem soll nur ein Bild maximiert sein.
Der HTML-Teil:

Code:

				<p class="swaplink" onclick="swapToLeft();">&lt;Zur&uuml;ck</p>
				<p class="swaplink" onclick="swapToRight();">&lt;Vorw&auml;rts</p>
				<div id="gallery">
					<img src="ressources/test.jpg" onclick="pictureClick(0)" class="small">
					<img src="ressources/test2.jpg" onclick="pictureClick(1)" class="small">
				</div>

Der Javscript-Teil:

Code:

function pictureClick(number) {
	var pictures = document.getElementById("gallery").getElementsByTagName("img");
	var isBig = pictures[number].className == "big";
	for (var i=0; i<pictures.length; i++) {
		pictures[i].className = "small";
	}
	if (!isBig) {
		pictures[number].className = "big";
	}
}
function swapToLeft() {
	var pictures = document.getElementById("gallery").getElementsByTagName("img");
	for (var i=0; i<pictures.length; i++) {
		if (pictures[i].className == "big") {
			var actPic = i;
		}
	}
	if (actPic) {
		pictures[actPic].className = "small";
		if (pictures[actPic - 1]) {
			pictures[actPic - 1].className = "big";
		}
	}
}
function swapToRight() {
	var bilder = document.getElementById("gallery").getElementsByTagName("img");
	for (var e=0; e<bilder.length; e++) {
		if (bilder[e].className == "big") {
			var actPic = e;
		}
	}
	if (actPic) {
		bilder[actPic].className = "small";
		if (bilder[actPic + 1]) {
			bilder[actPic + 1].className = "big";
		}
	}
}

Die SwapToLeft()-Funktion funktioniert prima, die swapToRight() leider nicht. Syntax- und Browserfehler habe ich ausgeschlossen.

Danke im Vorraus,
theLIX

Sempervivum · 1 Juli 2015

Der Debugger bringt es an den Tag: Das swapToRight() funktioniert nur dann nicht, wenn das aktuelle Bild das erste mit dem Index 0 ist.

Code:

if (actPic)

wertet nicht nur aus, ob die Variable definiert ist oder nicht sondern auch ihren Wert, wenn sie es ist: 0 liefert false und ungleich 0 liefert true. Daher wird die Anweisung für das erste Bild mit dem Index 0 nicht ausgeführt.
Lösung möglich, indem Du die Variable vor dem Suchen z. B. mit -1 initialisierst und hinterher entspr. abfragst.

Bildergalerie mit Weiter/Zurück

theLIX

Neues Mitglied

Sempervivum

Guest

Neueste Beiträge