Javascript Help Request

Discussion in 'Off-Topic Discussions' started by mattbrent, Feb 22, 2012.

Loading...
  1. mattbrent

    mattbrent Well-Known Member

    Hi folks!

    I'm hoping someone out there has a better grasp on this than I do. My web skills are rather dated, and I'm having some issues with javascript. I'm the webmaster for our high school, and we recently implemented a rotating banner at the top of the page.

    Lancaster High School - Home of the Red Devils

    Within the javascript code, we have to specify the names of the images. That wasn't so bad... until we decided to add more images. The way I set it up, I have to update the code on every page everytime we add images. (Stupid, I know... I wasn't thinking.) I'm trying to see if there's a way to have the script just reference a directory full of images and just pull an image from there. That way I can just put that script on every page and anytime I need to add an image, I can just drop it into the directory.

    If you look at the link above and view the source, I'm referring to the main banner of the site. We're trying to add more images of students. I'd appreciate any help you all could offer.

    Thanks!
    Matt
     
  2. mcjon77

    mcjon77 Member

    The first, simplest solution is to pull all of that javascript code out of the HTML file and put it into it's own .js file.

    As a result, insted of having that long list of javascript code in your <head> element like this...
    Code:
    ......
    var interval = 5; // delay between rotating images (in seconds)
    var random_display = 1; // 0 = no, 1 = yes
    interval *= 1000;
    
    var image_index = 0;
    image_list = new Array();
    image_list[image_index++] = new imageItem("readposter01.jpg");
    image_list[image_index++] = new imageItem("readposter02.jpg");
    image_list[image_index++] = new imageItem("readposter03.jpg");
    image_list[image_index++] = new imageItem("readposter04.jpg");
    image_list[image_index++] = new imageItem("readposter05.jpg");
    image_list[image_index++] = new imageItem("readposter06.jpg");
    image_list[image_index++] = new imageItem("readposter07.jpg");
    image_list[image_index++] = new imageItem("readposter08.jpg");
    image_list[image_index++] = new imageItem("readposter09.jpg");
    var number_of_image = image_list.length;
    ........
    you would have something like this

    Code:
    <script src="banner.js"></script>
    This way, when you need to modify the banner script, you only have to modify ONE FILE (the banner.js file).
     
  3. mattbrent

    mattbrent Well-Known Member

    GENIUS!!!! I don't know why I didn't think of that, considering I've totally done it before. :arms::arms:

    -Matt
     

Share This Page