Jump to content

Random Image with Time Interval


antwonw

Recommended Posts

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\" />";

?>

Link to comment
https://forums.phpfreaks.com/topic/185623-random-image-with-time-interval/
Share on other sites

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.

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!!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.