www.webdeveloper.com
Results 1 to 6 of 6

Thread: Rotate images randomly but without dups on same page

Hybrid View

  1. #1
    Join Date
    Apr 2009
    Posts
    23

    Rotate images randomly but without dups on same page

    Hello
    Currently i'm using this PHP code to create random images in fixed DIVS.
    I have 7 jpgs that i randomly want to load in a <div>. My client doesn't want to have PHP so i'm thinking JS.

    Is there anybody out there who wants to help me. I can find a lot of JS load random files. But the tricky thing is that the JS is not allowed to duplicate. So he can use each JPG once.

    Code:
    <?php 
    // rotate images randomly but w/o dups on same page - format: 
    // <img src='rotate.php?i=0'> - rotate image #0 - use 'i=1' 
    // for second, etc 
    // (c) 2004 David Pankhurst - use freely, but please leave in my credit 
    $images=array( // list of files to rotate - add as needed 
     "IMAGES/1.jpg", 
     "IMAGES/2.jpg", 
     "IMAGES/3.jpg", 
     "IMAGES/4.jpg",
     "IMAGES/5.jpg",
     "IMAGES/6.jpg",
     "IMAGES/7.jpg" ); 
    $total=count($images); 
    $secondsFixed=1; // seconds to keep list the same 
    $seedValue=(int)(time()/$secondsFixed); 
    srand($seedValue); 
    for ($i=0;$i<$total;++$i) // shuffle list 'randomly' 
    { 
     $r=rand(0,$total-1); 
     $temp =$images[$i]; 
     $images[$i]=$images[$r]; 
     $images[$r]=$temp; 
    } 
    $index=(int)($_GET['i']); // image index passed in 
    $i=$index%$total; // make sure index always in bounds 
    $file=$images[$i]; 
    header("Location: $file"); // and pass file reference back 
    ?>

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    not sure if something like this. however, for test purpose the code use document.write:

    Code:
    var images = [ "IMAGES/1.jpg", 
     "IMAGES/2.jpg", 
     "IMAGES/3.jpg", 
     "IMAGES/4.jpg",
     "IMAGES/5.jpg",
     "IMAGES/6.jpg",
     "IMAGES/7.jpg"];
    images.sort(function(){return Math.round(Math.random()) - .5;});
    for(var i = 0; i < images.length; i++){
    document.write("<div><img src='" + images[i] + "' /></div>");
    }
    i'm not quite sure in the part where you use $_GET to read the value and then set the Location to image's source. i'm guessing you use that script in something like <img src="image_random.php?i=1" />. is there no chance of duplicate image on each call? i don't know too much of PHP but i guess it do.

  3. #3
    Join Date
    Apr 2009
    Location
    Holland
    Posts
    4
    'is there no chance of duplicate image on each call?'

    Hardly.. if you look at the PHP script carefully you'll see it rounds the seed for the random function to one second precision. Because all calls from s single request will allmost always happen within that one second the sort order remains the same during that second.

    You can however get duplicates if the first image on the page is requested late in the second and the last image early in the next second.

  4. #4
    Join Date
    Apr 2009
    Posts
    23
    Hi Zerokilled

    Your script worked perfectly fine!
    Exactly as i wanted it to work! Thanks for that!
    The only thing now is that i don't need the document write but i need to place it in different div tags. So the size and position are set.

    OddesE
    The script Zero killed submitted worked like a charm! It doesn't duplicate a images, every image only shows up once. Now it needs te be able to call the JS from within different div tags, without duplicating a image.

  5. #5
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    back to old school solution, which should be very easy for you. in the provided script remove the for statement, that would be the last three line of the code. wherever you want to place an image, include the following code. if need to provide attribute for image, place it inside the double quote of the following code:
    Code:
    <script type='text/javascript'>
    document.write("<img src='" + images.shift() + "' />");
    </script>

  6. #6
    Join Date
    Apr 2009
    Posts
    23
    all i can say is:

    I LOVE OLDSCHOOL!
    thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles