Image rotation script?

Discussion in 'Web Design and Development' started by Dctape, Apr 6, 2008.

  1. Dctape macrumors regular

    Dctape

    Joined:
    Nov 24, 2007
    #1
    I"ve been asked to help with our church website some. The only problem is that I was aksed if we could have a section on the front page that includes a picture that changes everytime the page reloads. I'm using GoLive CS and have no budget (it IS a church....) Are there any easy ways or even a script that will do this?

    Thanks!

    -M
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    If you just need to have a random image, that's pretty easy. In JavaScript create an array with the source path to all possible images, then use Math.random() to find a random number and use that to pick an image source in the HTML and apply that source to it. That's the basis anyways. If you need actual code I can whip something up fairly quickly or you can do a search and find ones others have made.
     
  3. Dctape thread starter macrumors regular

    Dctape

    Joined:
    Nov 24, 2007
    #3
    Thanks. I'm not much of a coder so I'll need a little more help. I'll have a bank of about 5 or 6 images and they want a different one to come up each time the page loads.
    Thanks for the help.

    -M
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    OK, here's the JavaScript
    Code:
    window.onload = function() {
      var images = ['image1.jpg', 'image2.jpg'];
      var x = Math.floor(Math.random() * images.length);
      document.getElementById('randImg').src = images[x];
    };
    And example HTML
    HTML:
    <p><img id="randImg" src="image.jpg" width="156" height="197" /></p>
    Make sure to supply an image by default so people who don't have JavaScript enabled still get a picture. I'm also assuming the images are the same size. Otherwise you have to setup a deeper array that also contains the image dimensions. Let me know how this works for you. Oh, and since it is random you may get the same image multiple times in a row, it's just the nature of random.
     

Share This Page