 You don't need to be an 'investor' to invest in Singletrack: 6 days left: 95% of target - Find out more
Here goes. I'm trying to build a slider using Jquery. Now I'm following a tutorial and I've built this to the letter using my own pics, but for the life of me I can't get the first pic to load up. I've reduced the size of the file considerably but it just keeps hanging on my little loading icon.
Any suggestions on what else I should be looking at?
We are talking very simple code, nothing flash to pardon the pun (i'll get my coat)
Any chance of seeing to code ?
Are your image paths ok ?
Go mental:
[b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<style type="text/css">
.slider{
width:800px;
height: 350px;
overflow: hidden;
margin:30px auto;
background-image:url(slider/load.gif);
background-repeat:no-repeat;
background-position:center;
}
.shadow{
background-image:url(slider/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:864px;
height:144px;
margin:-60px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="slider/jquery-1.8.3.js"></script>
<script type="text/javascript" src="slider/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
function Slider(){
$(".slider#1").show("fade",500);
$(".slider#1").delay(5500).hide("slide",{direction:"left"},500);
var sc =$(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider#"+count).show("slide",{direction:"right"}, 500);
$(".slider#"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count==sc){
count=1;
}else{
count=count+1;}},6500);
}
</script>
</head>
<body onload="Slider()";>
<div class="slider">
<img id="1" src="images/computer.jpg" border="0" alt="computer"/>
<img id="2" src="images/design.jpg" border="0" alt="design"/>
</div>
<div class="shadow"></div>
</body>
</html>[/b]
The image locations are sound
Not sure if id can be just a numeric - try 'pic1' instead of just '1'. That might be it.
And the jQuery selector is over the top - each ID is unique (or should be!!!) so instead of '.slider#1' you can just use '#1' (or rather '#pic1').
Oh, and I think I remember a strange buglet in Jquery - instead of
$(".slider#"+count).show("slide",{direction:"right"}, 500);
set a variable up first:-
var mySlider = ".slider#" + count;
$(mySlider).show("slide",{direction:"right"}, 500);
one other thing, there shouldn't be any need to have any JS in the HTML so remove the...
and instead use a...onload="Slider()";
$(document).ready(function() {
Slider();
});
infact its probably even better to use
$(window).load(function() {
Slider();
});
as this wont start until the images have finished downloading
excellent, thank you, that all worked except now my second image wont load. Still further than I was because the first one will, just got to figure out why the second won't load (then obviously I can expand the number of images)
Do I need to repeat the code?
(I'm sure I could probably just download a plugin, but that feels like cheating)
haven't tested it, but it could well be because the count variable is in a different scope to the set interval function when it eventually calls itself, try alert()'ing out the count inside the interval fn
also, the using Id's will become a bit clunky when you start to scale it up, it's much cleaner to use classes, I found this approach was a really good starting place when I wrote my own plugin ... http://jonraasch.com/blog/a-simple-jquery-slideshow