Am I doing something wrong here?

Discussion in 'jQuery' started by Clockwork Joe, Jul 17, 2013.

0
  1. #1
    Trying to make a banner that slides images. It's on my test website so you can see it. I've been doing this for two days straight and I can't figure out what I'm doing wrong.

    I can't get the first image to fade in.

    http://www.test237.com/slidetest2.html

    <style>
.slider{
    width:900px;
    height:340px;
    overflow:hidden;
    margin:30px auto;
    background-image: url(images/loading.gif);
    background-repeat:no-repeat;
    background-position: center;
}
.slider img{
    width:900px;
    height:340;
    display:none;
}
</style>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
    function Slider(){
        $(".slider #1").show("fade",500);
    }
 
</script>
 
</head>
 
<body onload="Slider();">
 
 
<div class="slider">
<img id="1" src="img/banner1.png" border="0" />
<img id="2" src="img/banner2.png" border="0"/>
<img id="3" src="img/banner3.png" border="0"/>
<img id="4" src="img/banner4.png" border="0"/>
</div>
 
 
</body>
    Code (markup):

     
    Clockwork Joe, Jul 17, 2013 IP
  2. homer7

    homer7 Well-Known Member

    Messages:
    268
    Likes Received:
    25
    Best Answers:
    4
    Trophy Points:
    125
    #2
    you banner images do not exists on that url your specified, they are missing.
    if i put
    <div class="slider">
<img id="1" src="http://placehold.it/350x150" border="0"/>
<img id="2" src="http://placehold.it/350x200" border="0"/>
<img id="3" src="http://placehold.it/350x250" border="0"/>
<img id="4" src="http://placehold.it/350x300" border="0"/>
</div>
    PHP:
    the code will work.
     
    homer7, Jul 17, 2013 IP
  3. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #3
    You need to either upload your images or figure out where they actually are located.
    According to your script, they are here:
    http://www.test237.com/img/banner1.png

    But they aren't. Either upload them to the img folder or change your src attribute in your slider div.
     
    ekim941, Jul 20, 2013 IP