Results 1 to 10 of 10

Thread: Random rotating images (not slideshow/gallery)

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Random rotating images (not slideshow/gallery)

    Hi,

    I am looking for a script that lets me show a random image (from a selection of about 20 images) for each upload. What I want is the image to change only when the page is refreshed or each time the visitor comes to our site. I don't want the image to change once the page is uploaded. The images don't need to be hyperlinked.

    I remember having found such a script on this site many years ago, and it was a simple one. I can't find it now. I will be so grateful if anybody out there could give me a hint.

    Thank you.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    This is basic:
    HTML Code:
    <script type="text/javascript">
    /*********Edit values here for your pictures*******************/
    var pic1='http:h1.ripway.com/rangana/images/Picture1.png',
    pic2='http:h1.ripway.com/rangana/images/Picture2.jpg',
    pic3='http:h1.ripway.com/rangana/images/Picture3.jpg',
    pic4='http:h1.ripway.com/rangana/images/Picture4.jpg',
    pic5='http:h1.ripway.com/rangana/images/Picture5.jpg',
    pic6='http:h1.ripway.com/rangana/images/Picture6.jpg',
    pic7='http:h1.ripway.com/rangana/images/Picture7.jpg',
    pic8='http:h1.ripway.com/rangana/images/Picture8.jpg',
    pic9='http:h1.ripway.com/rangana/images/Picture9.jpg';
    /***************End of Edit*********************************/
    
    var rangPics=[pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9]; // Add all the picture variables in this array.
    window.onload=function() { rangRandom=Math.floor(Math.random()*rangPics.length);
    document.getElementById('show').innerHTML='<img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:350px;height:300px;">';}</script>
    <div id="show" style="text-align:center;width:350px;border:3px double #222;padding:10px;"></div>
    I've got only 9 images, you might want to fill it in. Anyway hope that helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    spellbinder (08-08-2008)

  4. #3
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!

    Have a good weekend!

  5. #4
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How can I accomplish the same thing but I want the images to link to a certain part of my website?

    Thanks!
    Last edited by lancebvs; 08-08-2008 at 05:04 PM.

  6. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    What's the link? Will it be the same as the image source? If so, then you could just add highlighted:
    Code:
    document.getElementById('show').innerHTML='<a href="'+rangPics[rangRandom]+'"><img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:350px;height:300px;"></a>;
    If you want different link, please say so, as we might need to modify the script (a little bit).
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #6
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I want like 3-4 images and each will take the person to a different page.

  8. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    This should do it:
    HTML Code:
    <script type="text/javascript">
    var rangPics=[
    // Add all the picture variables in this array. First parameter is the image and the second should be the link.
    ['http:h1.ripway.com/rangana/images/Picture8.jpg','http://www.google.com'],
    ['http:h1.ripway.com/rangana/images/Picture9.jpg','http://www.dynamicdrive.com'],
    ['http:h1.ripway.com/rangana/images/Picture7.jpg','http:/www.yahoo.com'],
    ['http:h1.ripway.com/rangana/images/Picture4.jpg','http://www.lafontana.ca']
    ];
    window.onload=function() { rangRandom=Math.floor(Math.random()*rangPics.length);
    document.getElementById('show').innerHTML='<a href="'+rangPics[rangRandom][1]+'" style="border:0px;"><img src="'+rangPics[rangRandom][0]+'" alt="myimage" style="width:350px;height:300px;"></a>';}</script>
    <div id="show" style="text-align:center;width:350px;border:3px double #222;padding:10px;"></div>
    Hope it helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  9. #8
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried the script and it still does not work:

    http://www.stringsdepotplus.com/contest.html


    Any ideas how I can get this working?

  10. #9
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, I am trying to get the rotator to work but having trouble. When I run the script all I see is and x my image here is the page. http://www.porthole.com/porthole/rotate.htm

    Thanks for any help you can give me.

    rdknott

  11. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    image http:www.porthole.com/porthole/images/TEST3.jpg does not exist

    better

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    </head>
    
    <body>
    
    <script type="text/javascript">
    /*********Edit values here for your pictures*******************/
    
    var rangPics=[];
    rangPics[0]='http://www.porthole.com/porthole/images/ship1.jpg',
    rangPics[1]='http://www.porthole.com/porthole/images/ship8.jpg',
    rangPics[2]='http://www.porthole.com/porthole/images/ship2.jpg',
    rangPics[3]='http://www.porthole.com/porthole/images/ship7.jpg',
    rangPics[4]='http://www.porthole.com/porthole/images/ship5.jpg',
    rangPics[5]='http://www.porthole.com/porthole/images/ship9.jpg',
    rangPics[6]='http://www.porthole.com/porthole/images/ship4.jpg',
    rangPics[7]='http://www.porthole.com/porthole/images/ship3.jpg';
    
    
    window.onload=function() {
     var rangRandom=Math.floor(Math.random()*rangPics.length);
     document.getElementById('show').src=rangPics[rangRandom];
     }
    
    </script>
    <div  style="text-align:center;width:788px;border:1px double #222;padding:10px; height: 223px;">
    <img id="show" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"  alt="myimage" style="width:788px;height:223px;" />
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

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