Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript for image change at refresh

    Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded.

    I found a code that lets me do this.
    This is the script:


    Code:
    <HEAD>
    
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.
    theImages[0] = '1.gif'
    theImages[1] = '2.gif'
    theImages[2] = '3.gif'
    theImages[3] = '4.gif'
    
    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
       preBuffer[i] = new Image()
       preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }
    </script>
    </HEAD>
    
    <BODY>
    
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    showImage();
    //  End -->
    </script>
    It worked fine, with four images.
    The thing is I wanted to put up to 16 in it.
    So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work.

    Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)...
    so then I had many images shown randomly but the problem now is that the random is very uneven among the images.
    Meaning, I get variation among very few, and many time repeating one.

    This is what my script looks like now:


    PHP Code:
    <SCRIPT LANGUAGE="JavaScript">

    <!-- 
    Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.
    theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg'
    theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg'
    theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg'
    theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg'
    theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg'
    theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
    theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg'
    theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'
    theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg'
    theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg'
    theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg'
    theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg'
    theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg'
    theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
    theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg'
    theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'

    var 0
    var theImages.length;
    var 
    preBuffer = new Array()
    for (
    0pi++){
       
    preBuffer[i] = new Image()
       
    preBuffer[i].src theImages[i]
    }
    var 
    whichImage Math.round(Math.random()*(p-1));
    function 
    showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }

    //  End -->
    </script> 
    So my question is:
    How can I manage with this script to have all my images showing up equally when they change in refresh?

    I don not mind if they are not random, I also tried to remove the random property but could not manage either.

    Any ideas?
    Thank you so much, I really appreciate your help.
    Paula
    Last edited by VIPStephan; 08-07-2013 at 08:23 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I copied your first piece of code and added images from index 4 to 15 as mentioned in your second piece of code ... and it works just fine

    http://jsbin.com/okune3

    I think there is something else going on somewhere on the page that keeps the script from running.

    PS: You can click on the button "Edit using JS Bin" on the top right corner of the linked page to see the code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,142
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    <script language=javascript>[/B] is long deprecated and obsolete. Use <script type = "text/javascript"> instead.
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are probably looking at ancient and perhaps unreliable code.

    Math.round() does not give true random distribution as within the range 0-2 the value1 is selected more frequently than 0 or 2. Change it to

    var whichImage = Math.floor(Math.random() * p); // if p = 4 returns 0-3 with even distribution

    But of course the same image may be randomly selected when the page reloads. The greater the number of images the lower the probability. The only way to guarantee no repetition is to use a cookie.
    Last edited by Philip M; 04-07-2011 at 08:57 AM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    So my question is:
    How can I manage with this script to have all my images showing up equally when they change in refresh?
    With this demo you can add as many pics as you like to the picPaths array and a random pic from all of them will be displayed on page load.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <script type="text/javascript">
                var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg'];
                var oPics = [];
                for(i=0; i < picPaths.length; i++){
                    oPics[i] = new Image();
                    oPics[i].src = picPaths[i];
                }
                curPic = Math.floor(Math.random()*oPics.length);
                window.onload=function(){
                    document.getElementById('imgRotator').src = oPics[curPic].src;
                }
            </script>
        </head>
        <body>
            <div>
                <img id="imgRotator" src="" alt="" />
            </div>
        </body>
    </html>
    Last edited by bullant; 04-07-2011 at 08:58 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    With this demo you can add as many pics as you like to the picPaths array and a random pic from all of them will be displayed on page load.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <script type="text/javascript">
                var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg'];
                var oPics = [];
                for(i=0; i < picPaths.length; i++){
                    oPics[i] = new Image();
                    oPics[i].src = picPaths[i];
                }
                curPic = Math.floor(Math.random()*oPics.length);
                window.onload=function(){
                    document.getElementById('imgRotator').src = oPics[curPic].src;
                }
            </script>
        </head>
        <body>
            <div>
                <img id="imgRotator" src="" alt="" />
            </div>
        </body>
    </html>

    This is so helpful. can each image have its own url? How can we do that? Thank you for your time. Please help.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •