Automatic jQuery Slideshow

**JohnoLFC** · Dec 22, 2012 09:03

Hey everybody, I'm in the process of making my first ever website. I'm only playing around with things at the moment, and I am trying to add an automatic slide show to the page. I have followed a tutorial and for some reason, the images aren't changing. I have tried to read up on Google and cannot see where I am going wrong. If any is able to help, I would be very grateful.

Here is the code I have so far:

HTML

Code:

<!DOCTYPE html>

<html>
	<head>
		<script type="text/javascript" src="javascript/jquery.js"></script>
		<script type="text/javascript" src="javascript/slideshow.js"></script>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
		<title>CSS Test</title>
	</head>

	<body onload="changeImage();">
		<div id="wrapper">

			<div id="headwrapper">

				<div id="logodisplay">

				</div><!--end logodisplay-->

				<div id="address">
					<p>32-34 Chapelgate<br>Retford<br>DN22 6PJ<br>01777 860111<br></p>
				</div> <!--end address -->

				<div id="socialnetworking">

					<img src="images/facebook.png">
					<img src="images/google.png">
					<img src="images/rss.png">
					<img src="images/twitter.png">
					<img src="images/email.png">

				</div><!--end socialnetworking-->

				<div class="navbar"> 

						<ul>
							<li>HOME</li>
							<li>ABOUT US</li>
							<li>WHATS ON</li>
							<li>GALLERY</li>
							<li>CONTACT US</li>
						</ul>

				</div><!--end navbar -->

				
			</div><!--end headwrapper-->

			<div id ="slideshow_container">

				<div id="counter">

					3

				</div> <!-- end counter -->

				<div class="behind">

					<img src="images/image1.jpg" alt="IMAGE">

				</div> <!--end behind -->

				<div class="infront">

					<img src="images/image1.jpg" alt="IMAGE">

				</div> <!--end infront -->

			</div><!-- end slideshow_container -->
			
		</div> <!--end wrapper -->
	</body>
</html>

CSS

Code:

 body {

	background-color: #EEE9E9;
	padding: 0;
	margin: 0;
}

#wrapper {
	width: 78%;
	height: 900px;
	display: block;
	margin: 0px auto;
	background-color: #EDEDED;
}

#headwrapper {
	width: 100%;
	height: 180px;
	display: block;
	margin: 0px auto;
	position: relative;
	background-color: white;
}

.navbar {
	display: block;
	height: 30px;
	width: 100%;
	position: absolute; 
	bottom: 0;
	background-color: #CDC9C9;
}

.navbar ul li {
	position: relative;
	bottom: 10px;
	display: block;
	float: left;
	margin-right: 5px;
	width: 180px;
	color: #FFFFFF;

}

#logodisplay {
	display: block;
	height: 80%;
	width: 45%;
	float: left;
	background-image: url("images/xoxo.png");
	background-repeat: no-repeat;
	margin: 25px;	
	padding: 0;
	margin: 5px;
}

#address p {
	display: block;
	float: right;
	position: absolute; 
	right: 0;
	height: 20%;
	width: 20%;
	color: #CDC9C9;
	font-size: 12pt;
	font-family: Georgia,Utopia,'Palatino Linotype',serif;
	letter-spacing: 1px;
	line-height: 17px;

}

.email {
	color: blue;
}

#socialnetworking {
	display: block;
	float: right;
	position: absolute; 
	right: 0;
	top: 100px;
	height: 20%;
	width: 20%;
}

#socialnetworking img {
	height: 16px;
	width: 16px;
	display: block;
	float: left;
	padding-right: 4px;
}

#slideshow_container {
	width: 900px;
	height: 500px;
	margin: 10px auto;
	overflow: hidden;
}

#slideshow_container div {
	width: 900px;
	height: 500px;
	position: absolute;

}

JAVASCRIPT SLIDESHOW

Code:

// Javascript Document

function changeImage () {
	var imagesInShow ="3";
	var currentImage = $ ("#counter").html();
	currentImage = parseInt ( currentImage );

	if (currentImage == imagesInShow) {
		var nextImage = 1;
	} 

	else 

	{
		var nextImage = currentImage + 1;
	}

	var currentSrc = $(".infront img").attr("src");
	var nextSrc = "images/image" + nextImage + ".jpg";

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

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

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

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

	// !!!IMPORTANT!!!
	setTimeout('changeImage'()',5000);

}

#(document).ready( function() ;

JAVESCRIPT JQUERY

This can be found here as it's pretty long!

Cheers

**Pullo** · Dec 22, 2012 13:24

Evening Johno,

Could you post a link to the page where I can have a look at the problem, or are you doing this locally?

**JohnoLFC** · Dec 22, 2012 13:29

Hey Pullo,

I'm afraid that its local, I've been looking since three o'clock and still cant get it working lol,

Cheers

**Pullo** · Dec 22, 2012 13:43

Okey dokey. No problem. It was laze, really, as you can normally debug stuff via the console better if you can see the page the error is occurring on.

No matter, I've had a look at your code and two things spring out at me in your JavaScript file.

This:

Code JavaScript:

setTimeout('changeImage'()',5000);

Should be:

Code JavaScript:

setTimeout(changeImage(), 5000);

and you don't need this:

Code JavaScript:

#(document).ready( function() ;

You can just delete it.
Try making those changes. Any good?

**JohnoLFC** · Dec 22, 2012 13:58

Hey Pullo,

That has nearly worked, thank you so much! The image comes up and cycles through the three very fast then ends on the final image. Is there a way to make this loop? So the slideshow is on an infinit loop?

I appreciate you help with this

**Pullo** · Dec 22, 2012 14:25

Sure thing!

You have a couple more syntax errors on closer inspection.
Remove the space after the dollar sign in the following lines:

Code JavaScript:

var currentImage = $ ("#counter").html();
$ (".behind img").attr("src" , currentSrc);
$ (".infront").css("display" , "none");

Does that help?

Edit:
Not sure if they're syntax errors per se, as other things seem to work with or without a space after the dollar.
Nonetheless, removing them make the slideshow work perfectly for me on my PC

**JohnoLFC** · Dec 22, 2012 14:42

Hey again Pullo,

I have removed the syntax errors and I'm still having the same issue. It briefly shows image3 and then dissolves into image1, then is stops.

I'm using SublimeText 2 and google chrome too if that helps solve it,

Cheers (again)

**Pullo** · Dec 22, 2012 14:46

That's weird, the code you posted should work perfectly otherwise.
As I can't actually check the page as you see it, I have made a demo of it working like it should: http://hibbard.eu/blog/pages/johno/
I have copied everything inline in this file (CSS and JavaScript), so if you have a look at the source code (Ctrl + U), then you can compare it to your code and see if there are any differences.

On the other hand, if I have missed something and the slider should behave differently than it does, just let me know.

HTH

P.S. Like the kittens?

**JohnoLFC** · Dec 22, 2012 15:11

Pullo! Your a legend! haha, I basically opened that page and copied your JavaScript to my .js file. Its working like a dream

I think I had the error on the final line...

I had:

setTimeout(changeImage(), 5000);

You had:

setTimeout('changeImage()',5000);

Thank again, I really appreciate the help

**Pullo** · Dec 22, 2012 15:17

Aw dude, yeah, sorry.
That was a typo in my first post. (It's been quite a long day!)

Anyway, it should be:

Code JavaScript:

setTimeout('changeImage()',5000);

with the quotes, otherwise the three images just cycle through and then don't do anything.
But you pointed that out already

Anyway, it's working now, so that's the main thing.
I'm off to bed.

**JohnoLFC** · Dec 22, 2012 15:21

Thanks, I'd been working on that since 3pm...its now 9pm haha,

Have a good Christmas

User Tag List

Thread: Automatic jQuery Slideshow

Thread Tools

Display

Automatic jQuery Slideshow

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions