I'm stuck on stupid. it's a simple slideshow that fades in and out images. When I launch the page the images don't fade in and out.
Can anyone check it out and let me know what I'm doing wrong?
Also I want to get rid of the fade and do a push slide of the images from left to right. Is that possible? If so how do I change the code to do it?
thanks!
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
function changeImage(){
var imageInShow = "3";
//please note in your hmtl code above, I gave your div an id since
//the statement below refers to and id and not a class.
var currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imageInShow){
var nextImage = 1;
}
else {
var nextImage = currentImage +1;
}
var currentSrc = $(".infront img").attr("src");
//shouldn't there be a / after media/images?
var nextSrc = "media/images" + nextImage + ".jpg";
$(".behind img").attr("src" , currentSrc);
$(".infront").css("display" , "none");
//notice I added a period before infront.
$(".infront img").attr("src" , nextSrc);
$(".infront").fadeIn(700);
$("#counter").html(nextImage);
setTimeout('changeImage()',5000);
}
That should do it though there are no guarantees but it should be pretty close. It looks like you're referring to a couple of other functions in your javascript but you didn't post those.