SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Automatic jQuery Slideshow

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo,

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

    Cheers

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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)

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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?

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'd been working on that since 3pm...its now 9pm haha,

    Have a good Christmas


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •