[RESOLVED] image Change

NZ_Kiwis

This might take some part Javascript but I want to run a code which will every 60 seconds redisplay an image... currently it refreshes my page every 60 seconds but i want it to just display a new picture.

The picture is from a URL saved in my database so it needs some sort of PHP code in there maybe via AJAX?

Can someone help? is this even possible?

Also I can not preload them all as there are 2000 URL's :-)

bpat1434

I think you could do this in pure JS. You could just create a giant JSON string of URLs and then randomly choose an image from it.

Or if you wanted to do AJAX and be more "intricate" you could create a session on the initial page hit, and then every 60 seconds fire off an AJAX request, have PHP generate a random image URL, see if it's been used by looking in the session, update the session to add the new url, then send back the URL of the image to use.

Hope that makes sense...

NZ_Kiwis

Sorry i didn't explain as well the PHP does some resize work on the image so I would need to run the myimage.php script.

But your right if I fire off a AJAX script every 60 seconds I could include this them couldn't i?

How do I get a javascript code to run ever 60 seconds... once I have done this I'll work out step 2 being the AJAX script which I need to run ;-)

NZ_Kiwis

This is what i have, it displays and image but does not refresh after 30 seconds....

<script type="text/javascript">


function ShowPic() {
document.write('<IMG SRC="randomimage.php">'); 
}
setTimeout(ShowPic, 30000);
</script>

how I loop this timer event?

NZ_Kiwis

or this... however once i've done document write it only has the image... no other source code why??

<body onload="InitializeTimer()">

<SCRIPT LANGUAGE = "JavaScript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer() {
    secs = 10
    StopTheClock()
    StartTheTimer()
}

function StopTheClock() {
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function StartTheTimer() {
    if (secs==0)  {
        document.write('<IMG SRC="randomimage.php">'); 
        secs = 5
    } else {
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}

//-->
</SCRIPT>

bpat1434

Okay, maybe I didn't make myself clear. If you run an AJAX request, PHP can't send back image data. Otherwise you'd have to have the image embedded in the page, which doesn't always work in all browsers 🙁

Your AJAX script would fire off a call to a php script which would just choose a random image. It would then send that URL (or image name) back. Javascript would then update the <img> tag and that would then go fetch the new image.

Here are three scripts that I threw together that work. I'm using the jQuery class just to make the JS easier on me.

index.html

<html>
<head>
	<title>Image Change</title>
	<script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" language="javascript"><!-- // --><![CDATA[
	var timeout;
	var tmp;

function announceChange()
{
	$('#info').slideDown("medium");
	tmp = setTimeout("hideChange()", 5000);
}

function hideChange()
{
	$('#info').slideUp("fast");
}

function getImage()
{
	$.ajax({
		type:"GET",
		url:"ajax.php",
		dataType:"json",
		error:updateImage({name:"image_unavailable", ext:"jpg"}),
		success:updateImage,
		complete:announceChange()
	});

	timeout = setTimeout("getImage()", 10000);
}

function updateImage(data)
{
	$('#imageRotate').attr('src', 'viewimage.php?n='+data.name+'&e='+data.ext);
}

$(document).ready(function() {
	getImage();
});
// ]]></script>
</head>
<body>
	<div id="info" style="background:#fdf6d4;border:2px solid #eae3c1;height:70px;left:50&#37;;margin-left:-250px;position:absolute;top:0;width:500px;">
		<div style="margin:5px;" id="info-content">
			<h4 style="border-bottom:1px dashed #ccc;margin:0 0 5px 0;">Image Updated!</h4>
			<p style="margin:0;">The image has been refreshed!!</p>
		</div>
	</div>
	<img id="imageRotate" alt="Rotating Image" src="viewimage.php?n=image_unavailable&e=gif" />
</body>
</html>

ajax.php

<?php

session_start();

$allowed = array('gif', 'jpg', 'jpeg', 'png');
$files = array();
$max = 150;

/* Just in case this is a new user */
if(!isset($_SESSION['used_images']))
	$_SESSION['used_images'] = array();

$dir = dir('./images');

while(false !== ($entry = $dir->read()))
{
	$info = pathinfo('./images/'.$entry);

if(in_array($info['extension'], $allowed) && $info['filename'] != 'image_unavailable')
	$files[] = array('name' => $info['filename'], 'ext' => $info['extension']);
}
$dir->close();

/* If the session count is the same as the number of files we have, reset the session info */
if(count($_SESSION['used_images']) == count($files))
	$_SESSION['used_images'] = array();

$max = count($files);
$max--;

$rand = chooseRandom(0, $max, $files, $_SESSION['used_images']);

$_SESSION['used_images'][] = $files[$rand]['name'];

echo '{name:"' . $files[$rand]['name'] . '", ext:"' . $files[$rand]['ext'] . '"}';

function chooseRandom($min, $max, $info, $check)
{
	$rand = rand($min, $max);

if(in_array($info[$rand]['name'], $check))
	chooseRandom($min, $max, $info, $check);

return $rand;
}

viewimage.php

<?php

$filetypes = array('gif', 'jpg', 'jpeg', 'png');
$max = 150;

if(empty($_GET['n']) || empty($_GET['e']) || 
	!in_array($_GET['e'], $filetypes) ||
	!file_exists('./images/' . $_GET['n'] . '.' . $_GET['e']))
{
	$filename = 'image_unavailable';
	$ext = 'gif';
}
else
{
	$filename = $_GET['n'];
	$ext = $_GET['e'];
}

$file = './images/' . $filename . '.' . $ext;

// Fix "jpg" extension for function names that use "jpeg"
if($ext == 'jpg')
	$ext = 'jpeg';

$imagecreatefrom = 'imagecreatefrom' . $ext;
$image = 'image' . $ext;

$o_dims = getimagesize($file);
$o_width = $o_dims[0];
$o_height = $o_dims[1];

$o_img = $imagecreatefrom($file);
$isTall = ($o_height >= $o_width);

if($isTall)
{
	$n_width = ceil(($max/$o_height)*$o_width);
	$n_height = $max;
}
else
{
	$n_width = $max;
	$n_height = ceil(($max/$o_width)*$o_height);
}

$n_img = imagecreatetruecolor($n_width, $n_height);

imagecopyresampled($n_img, $o_img, 0, 0, 0, 0, $n_width, $n_height, $o_width, $o_height);

header('Content-Type: ' . extension_to_image_type($ext));
$image($n_img);

function extension_to_image_type($ext)
{
	switch($ext)
	{		
		case 'jpg':
		case 'jpeg':
			return 'image/jpeg';
			break;

	case 'png':
		return 'image/png';
		break;

	case 'gif':
	default:
		return 'image/gif';
		break;
}
}

Hope that helps.