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:
Der Javscript-Teil:
Die SwapToLeft()-Funktion funktioniert prima, die swapToRight() leider nicht. Syntax- und Browserfehler habe ich ausgeschlossen.
Danke im Vorraus,
theLIX
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();"><Zurück</p>
<p class="swaplink" onclick="swapToRight();"><Vorwä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>
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";
}
}
}
Danke im Vorraus,
theLIX