Alternative?

Discussion in 'Web Design and Development' started by Aranince, Oct 1, 2008.

  1. Aranince macrumors 65816

    Joined:
    Apr 18, 2007
    Location:
    California
    #1
    On the front of a web site I maintain, I have a Flash slide show that simply rotates images. I have flash installed on my XP box, but I'd rather not have to deal with it after I get my Mac, and there really is no reason for me to buy Flash just for this one instance. Is there an alternative to get a very simple rotating image show on the front page without having to make it in Flash?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    JavaScript can do something like this pretty easily. Below is some code to do the trick. I commented the code so you can see where to make changes.

    PHP:
    ImageRotater = function() {
      
    // Add you image paths to this array
      
    var images = new Array('image01.jpg''image02.jpg''image03.jpg');
      var 
    = {
        
    id'theImg',   // the id attribute of the image
        
    wait5000,     // time in between rotate in milliseconds
        // don't change below
        
    imgnull,
        
    spot0,
        
    lenimages.length-1
      
    };
      
    Init = function() {
        
    v['img'] = document.getElementById(v['id']);
        
    // preload images
        
    for (var x=0y=images.lengthx<yx++) {
          var 
    = new Image();
          
    i.src images[x];
        }
        
    setTimeout(function(){Rotate()}, v['wait']);
      };
      
    Rotate = function() {
        
    v['spot'] = (v['spot'] >= v['len']) ? : ++v['spot'];
        
    v['img'].src images[v['spot']];
        
    setTimeout(function(){Rotate()}, v['wait']);
      };
      function 
    appendOnLoad(fx)
      { 
        var 
    old window.onload;
        if (
    typeof old != 'function') { window.onload fx; }
        else { 
    window.onload = function() { old(); fx(); } }
      }
      
    appendOnLoad(Init);
    }();
    For the HTML just make sure you have an image tag like below
    HTML:
    <img id="theImg" src="image01.jpg" alt="" />
    Let me know if you have any problems with this. There's other ways to do it, but this is what I came up with.
     
  3. Aranince thread starter macrumors 65816

    Joined:
    Apr 18, 2007
    Location:
    California
    #3
    Ah! Javascript! I didn't think about that. Thanks!
     

Share This Page