Results 1 to 7 of 7

Thread: Random Image from folder

  1. #1
    Join Date
    Sep 2007
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random Image from folder

    I am looking to add a random image to a webpage. I would like it to beable to pull a image from a folder that could contain any file name.jpg even .gif also. I found this comment on here but no code or further post about it
    see site at wichitarcraceway it the pictures on front page that iam dealing with.

    A better idea would be to:

    1. have a folder that contained the images.
    2. a routine to get the number of items in the folder.
    3. generate a random number based on the number of items.
    4. get the Nth(random item) file in the folder.
    5. verify that its an image file (if not get another one or the next on n+1)
    6. pass the path and item name to the display routine.
    7. the display routine also needs to size the image.

    then you could just add new images to the folder and not have to rewrite the script each time.


    any help would be great

    Heres another I tried to use but renaming the files is not very productive. The problem is that the images are in a differant folder than the webpage, images/random maybe someone could help with this also
    <script language="JavaScript">
    <!--

    /*
    Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
    Over 400+ free JavaScripts here!
    Keep this notice intact please
    */

    function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="image1.jpg"
    myimages[2]="image2.jpg"
    myimages[3]="image3.jpg"
    myimages[4]="image4.jpg"
    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)
    ry=1
    */I tried <img src="../image/random/'
    */<img src="../image/random"'
    */<img src="image/random"'
    document.write('<img src="'+myimages[ry]+'" border=0>')
    }
    random_imglink()
    //-->
    </script>
    Last edited by big-dog1965; 09-01-2007 at 07:29 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you have PHP available on your host, this should work out (the below page must use the .php extension):

    somepage.php
    ____________________
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    <body>
    <script type="text/javascript">
    /*
    Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
    Over 400+ free JavaScripts here!
    Keep this notice intact please
    */
    function random_imglink(){
    
    <?php
    function returnimages($dirname="./images/") {
       $pattern="\.(jpg|jpeg|png|gif|bmp)$";
       $files = array();
       $curimage=0;
       if($handle = opendir($dirname)) {
           while(false !== ($file = readdir($handle))){
                   if(eregi($pattern, $file)){
                     echo 'myimages[' . $curimage .']="' . $dirname . $file . '";' . "\n";
                     $curimage++;
                   }
           }
    
           closedir($handle);
       }
       return($files);
    }
    
    echo "var myimages=new Array();" . "\n";
    returnimages();
    ?>
    
    var ry=Math.floor(Math.random()*myimages.length)
    document.write('<img src="'+myimages[ry]+'" border=0>')
    }
    random_imglink()
    </script>
    </body>
    </html>
    The images go in a folder named images off of the folder that contains the above page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2007
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John That is great, If Theres a way to have a option of have 1 picture or 2 pictures side by side would be even better, either way great job and THANKS
    I did try and change the ./images asuming that was where it was getting the images from to a http://website.com/webgalery/users/images thinking I would not even have to copy the files at all but didnt work.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Depending upon how the server is configured, generally PHP can only pull images from a relative path on the same server. For example, you could change ./images to ../myimagefolder - which would then pull the images from a folder named myimagefolder that was off of the same folder as the folder that the page is in is off of.

    Anyways, to answer your other question, to get two random images side by side, replace:

    Code:
    var ry=Math.floor(Math.random()*myimages.length)
    document.write('<img src="'+myimages[ry]+'" border=0>')
    with:

    Code:
    myimages.sort(function() {return 0.5 - Math.random();});
    document.write('<img src="'+myimages[0]+'" border=0><img src="'+myimages[1]+'" border=0>');
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    You could just do the whole thing with PHP and eliminate JavaScript from the picture entirely...
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by alexjewell View Post
    You could just do the whole thing with PHP and eliminate JavaScript from the picture entirely...
    I was thinking that. However, my knowledge of PHP is rather limited. So how would one do:

    Code:
    myimages.sort(function() {return 0.5 - Math.random();});
    document.write('<img src="'+myimages[0]+'" border=0><img src="'+myimages[1]+'" border=0>');
    via PHP?

    Or, for that matter, since the myimages array presumably wouldn't be of any value on the server side, just how exactly would you suggest it be done?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2007
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks that works for 2 pictures

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
  •