javascript slideshow not working right

Discussion in 'JavaScript' started by johnf905, Apr 28, 2010.

  1. #1
    Hi,
    I have a new website I built in php--sporthoundz--and am using javascript as an image slider but I can only get two images to work. Any more than two the other images do not show. It works fine on my computer with Wamp but not on the hosted server.
    Any suggestions? All the source code is on the landing page(index.php).
    Thx,
    J.F.
     
    johnf905, Apr 28, 2010 IP
  2. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #2
    Maybe a problem in your paths... Show us your code
     
    nabil_kadimi, Apr 28, 2010 IP
  3. johnf905

    johnf905 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can see the entire code by going to www.sporthoundz.com and viewing the source code for that page.
    I've tried relative paths, absolute paths and nothing seems to work. Unfortunately I'm not familiar enough with javascript routines and how they interact with php files.
    Thx, any suggetions are welcome!!!!!!!!!!!!!!!!
    J.F.
     
    johnf905, Apr 28, 2010 IP
  4. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #4
    As I said before, it's a problem with images paths, either the images do not exist or the paths are wrong
    one example is : http://www.sporthoundz.com/sports/moto-6.jpg - this returns a 404 error... so images are not on the "sports" directory

    Please review your paths, for simplicity, I suggest you place the images for the slideshow on a folder like /images or /images/slideshow
     
    nabil_kadimi, Apr 28, 2010 IP
  5. johnf905

    johnf905 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This is the code:
    <head>
    <script type="text/javascript" language="JavaScript">
    <!-- // Begin Header portion of the script
    // CodeAve.com JavaScript SlideShow
    // Created from the JavaScript SlideShow ScriptWriter on 10-02-2000
    // http://www.codeave.com

    var pictures = new Array
    // List all the pictures in the slideshow here
    (
    "images/baseball-1.jpg"
    ,"images/hockey-2.jpg"
    ,"images/snow-3.jpg"
    ,"images/surf-4.jpg"
    ,"images/basket-5.jpg"
    ,"images/moto-6.jpg"
    ,"images/skijump-7.jpg"
    ,"images/kick-8.jpg"
    ,"images/wind-9.jpg"

    );
    var picture_num = 0; //should this be set to 1??
    var current_picture = new Image();
    current_picture.src = pictures[picture_num];
    function start_show()
    {
    // Time is in seconds X 1000
    setInterval("slideshow()", 3000);
    }
    function slideshow()
    {
    picture_num++;
    if (picture_num == pictures.length)
    {
    picture_num = 0;
    }
    current_picture.src = pictures[picture_num];
    document["rotating_picture"].src = current_picture.src;
    }
    // End of header portion of script -->
    </script>
    </head>
    <body onload="start_show()">

    html portion:
    <!--Slideshow-->
    <img name="rotating_picture" src="images/baseball-1.jpg" width="220" height="220" alt="" />
    <!--End slideshow-->

    I've tried changing paths, removing the sports folder and inserting all the jpg's in the images folder but still no luck. I even resized all the images just to make sure

    It's probably some simple fault I'm not seeing but I don't know what???????
    J.F.
     
    johnf905, Apr 28, 2010 IP
  6. Magic Toolbox

    Magic Toolbox Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    As nabil_kadimi said above, your image paths are wrong.

    The JavaScript is looking for the images in this folder /sports/images/

    But you need it to be looking for them in this folder /images/

    So change this:

    "images/baseball-1.jpg"
    ,"images/hockey-2.jpg"
    ,"images/snow-3.jpg"
    ,"images/surf-4.jpg"
    ,"images/basket-5.jpg"
    ,"images/moto-6.jpg"
    ,"images/skijump-7.jpg"
    ,"images/kick-8.jpg"
    ,"images/wind-9.jpg"
    Code (markup):
    to this:

    "/images/baseball-1.jpg"
    ,"/images/hockey-2.jpg"
    ,"/images/snow-3.jpg"
    ,"/images/surf-4.jpg"
    ,"/images/basket-5.jpg"
    ,"/images/moto-6.jpg"
    ,"/images/skijump-7.jpg"
    ,"/images/kick-8.jpg"
    ,"/images/wind-9.jpg" 
    Code (markup):
    Spot the difference? The files have an absolute path, not a relative path.

    If you still struggle, download our JavaScript slideshow instead. It works.
     
    Magic Toolbox, May 8, 2010 IP
  7. johnf905

    johnf905 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Already tried that! Thx anyway. J.F.
     
    johnf905, May 9, 2010 IP
  8. johnf905

    johnf905 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You were right! My path was OK but for some reason when I uploaded my images some of the image extensions were capitalized-e.g. .JPG and should have been .jpg ! I found it by accident when uploading more images but you put me on the right track.
    Thx a bunch,
    J.F.
     
    johnf905, May 24, 2010 IP
  9. johnf905

    johnf905 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You put me on the right track! Found it by accident. I'm using Cute ftp and some of the image extensions were uploaded as .JPG and should have been .jpg!!!!
    Thx for your help,
    J.F.
     
    johnf905, May 24, 2010 IP