Trädvy Permalänk
Medlem
Registrerad
Jul 2016

Bildspel

Jag håller på att skapa ett bildspel där jag hämtar bild och text från en XML-fil.
Tyvärr får jag inte detta att funka över huvudtaget. Någon som kan se vad jag gör för fel.

När jag hårdkodar in arrayerna så funkar det.

Tack på förhand!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bildspel.css">
</head>
<body>
<img src="upload/daglilja.jpg" id="slideshow">
<br>

<div id="caption">
bildtext
</div>

<div id="date">
datum
</div>

<a href="#" onclick="changeImage(-1); return false">Förra bilden</a><br>
<a href="#" onclick="changeImage(1); return false">Nästa bilden</a><br>

<script src="bildspel.js"></script>
</body>
</html>

var images = [];
var caption = [];
var dates = [];

var ajax = new XMLHttpRequest();
//alert("Före loadXMLDoc");

ajax.open("GET", "images.xml", false);
ajax.send();

var xml=ajax.responseXML;

//var images = ["upload/daglilja.jpg", "upload/helena.jpg", "upload/krokus.jpg"];
//var caption = ["fin blomma", "underbar ros", "lila krokus"];

var imageNumber = 0;
var imageLength = images.length - 1;

console.log(images[1]);

function changeImage(x) {
imageNumber += x;
//console.log(imageNumber);
//console.log(images);
//om man kommit till arrayen slut starta om
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}

document.getElementById("slideshow").src = images[imageNumber];
document.getElementById("caption").innerHTML = caption[imageNumber];
document.getElementById("date").innerHTML = date[imageNumber];
return false;
}