antwonw Posted December 18, 2009 Share Posted December 18, 2009 So I have this script below that will look for my jpgs in a certain folder and then randomly display them. It works great but I am wanting to take this one step further. I am wanting to make it so the image changes to another random image from the same folder at a certain interval--say 3 seconds. But I am not wanting it to reload the page. I realize I could do this with Java but I don't want to for several reasons, one being that some people have Java disabled and I still want it to change the image. So does anyone have any suggestions? I am a new-self-taught-learning PHP coder. Thanks! <?php /* * Name your images 1.jpg, 2.jpg etc. * * Add this line to your page where you want the images to * appear: <?php include "randomimage.php"; ?> */ // Change this to the total number of images in the folder $total = "11"; // Change to the type of files to use eg. .jpg or .gif $file_type = ".jpg"; // Change to the location of the folder containing the images $image_folder = "images/random"; // You do not need to edit below this line $start = "1"; $random = mt_rand($start, $total); $image_name = $random . $file_type; echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />"; ?> Quote Link to comment Share on other sites More sharing options...
oni-kun Posted December 18, 2009 Share Posted December 18, 2009 This is impossible to accomplish. PHP is a serverside language, meaning it'd output the result before it could even randomly change. You must do this in Javascript, Java/flash makes no sense to.. JS should be simple such as if you define a function to swap images: setInterval(swapImages(), 3000); For 3 second intervals. Simple enough. Quote Link to comment Share on other sites More sharing options...
antwonw Posted December 18, 2009 Author Share Posted December 18, 2009 This is impossible to accomplish. PHP is a serverside language, meaning it'd output the result before it could even randomly change. You must do this in Javascript, Java/flash makes no sense to.. JS should be simple such as if you define a function to swap images: setInterval(swapImages(), 3000); For 3 second intervals. Simple enough. Alrighty, Thanks anyways. I thought it might be possible but I am learning. So in case you're wondering this is what I did. In Head <script> // ======================================= // set the following variables // ======================================= // Set speed (milliseconds) var speed = 5000 // Specify the image files var Pic = new Array() // don't touch this // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'images/main/image1.jpg' Pic[1] = 'images/main/image2.jpg' Pic[2] = 'images/main/image3.jpg' Pic[3] = 'images/main/image4.jpg' Pic[4] = 'images/main/image5.jpg' Pic[5] = 'images/main/image6.jpg' Pic[6] = 'images/main/image7.jpg' Pic[7] = 'images/main/image8.jpg' Pic[8] = 'images/main/image9.jpg' Pic[9] = 'images/main/image10.jpg' Pic[10] = 'images/main/image11.jpg' // ======================================= // do not edit anything below this line // ======================================= var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ document.images.SlideShow.src = preLoad[j].src j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed) } </script> Body line <body onload="runSlideShow();"> My image in the Body <img src="image1.jpg" name="SlideShow" width="780px" height="469" /> Again, thanks for the point in the right direction!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.