SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Image Slideshow Question

    I originally asked this question in the PHP forum, but I was steered towards JavaScript, so I think I'd better ask my next question here.

    I originally set out to make a simple animated image, consisting of three separate images displaying for two seconds each. Then I suddenly remembered that jpg's can't be animated. So I decided to try an alternate solution.

    I want to display the images on my site's home page. The images are located in MySite/images/Home/

    I found a library script that's super easy to set up, but the file size is huge. So I checked out some tutorials, but none of them are working for me so far. I'm probably just making a really simple mistake.

    Anyway, I posted several of the scripts I tried below and wondered if anyone could tell me what's wrong with them (or what's wrong with any one of them).

    P.S. Is it true that you aren't supposed to use forward slashes - / - in an URL in a JavaScript function - that you have to use \/ instead? I've done a little work with JavaScript, and I don't recall that rule.

    Thanks.

    Code:
    <SCRIPT type="text/javascript">
    var images = new Array( '\/images\/Home\/Banner1.jpg'
                          , '\/images\/Home\/Banner2.jpg'
                          , '\/images\/Home\/Banner3.jpg');
    var current_image = 0;
     
    function rotate_images(){
        if(current_image++ >= images.length) current_image=images.length-1;
        document.getElementById('img_slidshow').src=images[current_image];
    }
     
    setTimeout('rotate_images', 2000);
    </script>

    Code:
    <script language="JavaScript">
    //creating a array of the image object
    
    var image=new Array("images/Home/Banner1.jpg",
                        "images/Home/Banner2.jpg",
                        "images/Home/Banner3.jpg",
                        )
    //variable that will increment through the images
    
    var num=0
    // set the delay between images
    
    var timeDelay
    
    Preload Images
    Preload the images in the cache so that the images load faster
    //create new instance of images in memory 
    
    var imagePreload=new Array()
    for (i=0;i<image.length;i++)
    {
       imagePreload[i]=new Image()
    // set the src attribute
    
    imagePreload[i].src=image[i]
    }
    
    
    //for automatic Slideshow of the Images
    
    function slideshow_automatic()
    { 
    if (slideshow.checked)
       {
        if (num<image.length)
         {
           num++
           //if last image is reached,display the first image
    
           if (num==image.length) 
           num=0
           image_effects()
           //sets the timer value to 4 seconds, 
    
           //we can create a timing loop 
    
           //by using the setTimeout method
    
           timeDelay=setTimeout("slideshow_automatic()",2000) 
           document.images.slideShow.src=image[num]   
         }
       }  
       if (slideshow.checked==false)
       { 
         //Cancels the time-out that was set with the setTimeout method. 
    
          clearTimeout(timeDelay)
       }
    }
    </script>

    Code:
    <script language="JavaScript">
    
    pix = new Array();
    
    pix[0] = "images\/Home\/Banner1.jpg";
    pix[1] = "images\/Home\/Banner2.jpg";
    pix[2] = "images\/Home\/Banner3.jpg";
    
    var i = 0;
    
    function slideshow(){
    setInterval("change()", 2000);
    }
    
    function change(){
    document.images.pic.src = pix[i];
    i = i + 1;
    ...
    }
    
    </script>



    Code:
    <script language="JavaScript">
    
    pix = new Array();
    
    pix[0] = "\/images\/Home\/Banner1.jpg";
    pix[1] = "\/images\/Home\/Banner2.jpg";
    pix[2] = "\/images\/Home\/Banner3.jpg";
    
    var i = 0;
    
    function slideshow(){
    setInterval("change()", 2000);
    }
    
    function change(){
    document.images.pic.src = pix[i];
    i = i + 1;
    if (i > (pix.length-1)) {i = 0} 
    }
    
    </script>

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've done few so stupid mistakes in exhibit 1 that it's even embarrasing. Here's a corrected and working example:

    Code javascript:
    <img id="slideshow" src="image1.jpg" />
     
    <script type="text/javascript">
    var images = new Array( 'image1.jpg'
                          , 'image2.jpg'
                          , 'image3.jpg');
    var current_image = 0;
     
    function rotate_images(){
        if(++current_image >= images.length) current_image=0;
        document.getElementById('slideshow').src=images[current_image];
     
        setTimeout('rotate_images()', 2000);
    }
     
    rotate_images();
    </script>

    BTW, you only need to escape backslashes (\) within strings, because it happens to be an escape meta-symbol.

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that's an awesome script. I think I have some older, more primitive slide shows on some of my sites that I can replace with your script as well.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If you're wanting a 3 images to be displayed at 2 seconds each, the easiest solution is to create an animated gif. That way it will work in a larger number of environments
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    If you're wanting a 3 images to be displayed at 2 seconds each, the easiest solution is to create an animated gif. That way it will work in a larger number of environments
    That was the original plan, but the images I'm working with are photos that need to be saved as jpg's.


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
  •