Slide Show Delay/HTML or JavaScript

Discussion in 'General Computer Support' started by nancy, Nov 30, 2009.

  1. nancy

    nancy

    Joined:
    Nov 30, 2009
    Messages:
    1
    I have a simple clean "previous/next" slide show set up using an external .js for each of a handful of web pages. It works well. However, the moment I change pages, I see a quick flash of the slide area before the first image drops in. I have added a preload for all images, but it doesn't seem to matter if the images are cached or not. I am not a javascript wiz. I am a graphic designer who struggles with code...

    Any ideas? (I can't post a link to the site because i'm a newcomer here.)

    Here is my javascript for one of the .js pages (pardon the //, I copied the script and have left them):

    // Create an Array of Image Locations
    var myImg= new Array()
    myImg[0]= "images/p_pic1.gif";
    myImg[1]= "images/p_pic2.gif";
    myImg[2]= "images/p_pic3.gif";
    myImg[3]= "images/p_pic4.gif";
    myImg[4]= "images/p_pic5.gif";
    myImg[5]= "images/p_pic6.gif";
    myImg[6]= "images/p_pic7.gif";
    myImg[7]= "images/p_pic8.gif";
    myImg[8]= "images/p_pic9.gif";

    // Create an Array of Captions
    var myCap= new Array()
    myCap[0]= "Darien Arts Center | Annual Program Cover";
    myCap[1]= "City of New Haven/ Yale | Poster for Community Health Event";
    myCap[2]= "The Aldrich Museum | Education Booklet";
    myCap[3]= "Darien Arts Center | Performance Poster";
    myCap[4]= "Darien Arts Center | Template Designs for Posters & Flyers";
    myCap[5]= "The Waterbury Companies | Package Design";
    myCap[6]= "The Aldrich Museum | ARTFORUM Ad";
    myCap[7]= "The Aldrich Museum | Education Cards";
    myCap[8]= "The Aldrich Museum | Mailers";





    // Create Number of Images Variable
    var n = myImg.length;

    // Create Number Variable
    var i = 0;

    // Create Image Number Variable
    var m = 1;

    // Create Function to Load Image
    function loadImg(){
    // Gives "imgSrc" a Source with Number Variable
    document.imgSrc.src = myImg;
    // Gives "caption" DIV a content
    document.getElementById("caption").innerHTML = myCap;
    // Gives "imgNum" DIV the image number
    document.getElementById("imgNum").innerHTML = m + "/" + n;
    }

    // Create Link Function to Switch Image Backward
    function prev(){
    // Create If/Else Statement to Stop at Certain Image
    // If the Number Variable is Less Than 1
    if(i<1){
    // Create Another Next Number Variable which Equals to Number Variable
    var l = i = n-1;
    // Create Current Number Variable which Equals to Image Number Variable
    var c = m = n;
    // Otherwise
    }else{
    // Next Number Variable Equals to Number Variable - 1
    var l = i-=1;
    // Current Number Variable Equals to Image Number Variable - 1
    var c = m-=1;
    }
    // Gives "imgSrc" a Source with an Alternative "l" Variable
    document.imgSrc.src = myImg[l];
    // Gives "caption" DIV a content
    document.getElementById("caption").innerHTML = myCap;
    // Gives "imgNum" DIV the image number
    document.getElementById("imgNum").innerHTML = c + "/" + n;
    }

    // Create Link Function to Switch Image Forward
    function next(){
    // Create If/Else Statement to Stop at Certain Image
    // If the Number Variable is More Than [Minus 1 of the Number of Arrays]
    if(i>n-2){
    // Create Next Number Variable which Equals to Number Variable
    var l = i = 0;
    // Create Current Number Variable which Equals to Image Number Variable
    var c = m = 1;
    // Otherwise
    }else{
    // Next Number Variable Equals to Number Variable + 1
    var l = i+=1;
    // Current Number Variable Equals to Image Number Variable + 1
    var c = m+=1;
    }
    // Gives "imgSrc" a Source with Next Number Variable
    document.imgSrc.src = myImg[l];
    // Gives "caption" DIV a content
    document.getElementById("caption").innerHTML = myCap;
    // Gives "imgNum" DIV the image number
    document.getElementById("imgNum").innerHTML = m + "/" + n;
    }

    // Load function after page loads
    window.onload = loadImg;
     
    nancy, Nov 30, 2009
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian

    Getting HTML page from JavaScript link?

    Brian, Aug 16, 2004, in forum: Computer Support
    Replies:
    8
    Views:
    481
    data64
    Aug 18, 2004
  2. Stone
    Replies:
    1
    Views:
    15,771
    stephen
    Sep 27, 2006
  3. hiralcp
    Replies:
    0
    Views:
    896
    hiralcp
    Dec 19, 2007
  4. Shane

    To Javascript, or not to Javascript

    Shane, Aug 29, 2005, in forum: NZ Computing
    Replies:
    5
    Views:
    568
    Waylon Kenning
    Aug 30, 2005
  5. kit
    Replies:
    0
    Views:
    3,420
Loading...

Share This Page