slideshow js code doesn't work

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kratos-2012
Forum Newbie
Posts: 4
Joined: Tue Aug 10, 2010 3:06 pm

slideshow js code doesn't work

Post by kratos-2012 »

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>

<script language="javascript" src="media/js/jquery.js"></script>

<script language="javascript" src="media/js/slideshow.js"></script>

<style type="text/css">

.container {

width:1062px;
height:265px;
margin:0px;
overflow:hidden;
}

.container div {
width:1062px;
height:265px;
position:absolute;
}

</style>

</head>

<body onload="changeImage();">

<div class="container">

<div class="counter">1</div>

<div class="behind">
<img src="media/slideshowimages/1.jpg" alt="image">

</div>

<div class="infront">

<img src="media/images/1.jpg" alt="image"></div>



</div>

</body>


Here is the JS code:
function changeImage(){
var imageInShow = "3";
var currentImage = $("#counter").html();
currentImage = parseInt(currentImage);

if (currentImage == imageInShow){

var nextImage = 1;
}

else {

var nextImage = currentImage +1;


}

var currentSrc = $(".infront img").attr("src");

var nextSrc = "media/images" + nextImage + ".jpg";

$(".behind img").attr("src" , currentSrc);
$(".infront").css("display" , "none");

$("infront img").attr("src" , nextSrc);

$(".infront").fadeIn(700);

$("#counter").html(nextImage);


setTimeout('changeImage()',5000);
}
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: slideshow js code doesn't work

Post by JakeJ »

I seem to have read that onload doesn't play well with jQuery.

You're better off using the following:

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
changeImage();
} );
</script>
Let me know if you have questions.
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: slideshow js code doesn't work

Post by JakeJ »

Get rid of <body onload="changeImage();">. err.. get rid of just the onload statement.

I've modified your code to reflect what I'm trying to get across. (I took out the <style> section for readability.

Your js code has some problems too. You'll find that below.

Code: Select all

<!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>

<script language="javascript" src="media/js/jquery.js"></script>

<script language="javascript" src="media/js/slideshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
changeImage();
} );
</script>
</head>
<body>
<div class="container">
<div class="counter" id="counter">1</div>
<div class="behind">
<img src="media/slideshowimages/1.jpg" alt="image">
</div>
<div class="infront">
<img src="media/images/1.jpg" alt="image"></div>
</div>
</body>
Your js code:

Code: Select all

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.
Post Reply