...

View Full Version : Web slide show



timgolding
10-31-2006, 03:07 PM
For an Social enterpise open evening I have produced a website slide show that flicks through web sites on a timer. Here is the code for it



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en-us>
<head>
<?PHP
if (isset($_GET['i'])) $i=$_GET['i']; else $i=0;
$pages=array('http://jamiescomputerclub.org.uk','http://pinman-designs.co.uk','http://jamiesmicroprop.org.uk','http://ssj.org.uk');
$total=sizeof($pages);

echo'
<title>Jamie\'s Web Show - '.$pages[$i].'</title>
</head>
<body>
<IFRAME SRC="'.$pages[$i].'" SCROLLING="auto" WIDTH="100%" HEIGHT="100%" ></IFRAME>';

if($i+2>$total) $i=0;
else $i++;

echo'
<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the next page in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>

<script>
<!--

/*
Count down then redirect script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

//change below target URL to your own
var targetURL="http://localhost/openday/index.php?i='.$i.'"
//change the second to start counting down from
var countdownfrom=30


var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
</script>

</body>
</html>';

?>



The slide show works fine expect that I want it to be pausable so that I can click a button and the timer stops counting down, another button to resume. I am a complete noob with Java script so if anyone can offer some advice as to how I can include a pause and play button I would be very greatful

Thanks in advance.

ess
10-31-2006, 04:24 PM
Here is what I would do

1- in JavaScript, create an array of image Objects. This will help in caching the images to your users HD, and will speed the transition between images. so, in your php code, you should collect the names of images you want to have in the slide show, and have php generate the JS. here is an example


<?php
// declare an array that contains references to images on the server.
$array_of_images = array( "image1.jpg", "image2.jpg", "image3.jpg" );

// start writing an array in JS
echo '<script type="text/javascript">';
// declare an array in JavaScript
echo "\nvar my_images;\n";
echo "my_images = new Array();\n";

// start generating the array from PHP to JS
for( $i = 0; $i < count( $array_of_images ); $i++ )
{
echo "my_images[". $i . "] = new Image();\n";
echo "my_images[". $i . "].src = '" . $array_of_images[ $i ] . "';\n";
} # ends for loop

// close javascript array
echo "</script>";
?>

2- Now, we have an array ready for us to use in JavaScript. for this to work, we need to have three functions, one to get the slide show going by calling another function that will keep calling itself, and the third will pause it when needed.


<script type="text/javascript">
// this is our reference to the timer and will be used to ensure
// that when the script is pause, it is cleared.
var timer_id = false;
// keeps a reference of which image is currently on display
var image_id = -1;
// time it takes before another image is displayed.
var duration = 5000; // the timer is in milliseconds. so, 5000 is 5 seconds

function start_slides()
{
timer_id = window.setTimeout( "display()", duration );
}
function stop_slides()
{
window.clearTimeout( timer_id );
}

function display()
{
if( timer_id != false )
{
if( ++image_id == my_images.length )
image_id = 0;

// uncomment the following line
//window.document.getElementById( "image_area" ).src = my_images[ image_id ];

// and comment the line below
window.document.getElementById( "display_area" ).innerHTML = "Image " + image_id + ": " + my_images[ image_id ];
timer_id = window.setTimeout( "display()", duration );
}
}

</script>
<input type="button" value="start" onclick = "javascript: start_slides();"/>
<input type="button" value="stop" onclick = "javascript: stop_slides();"/>
<div id="display_area">

</div>
<img src="" id="image_area">

If you run the script, it will display image objects in your browser..
just read the script, comment one line, and uncomment the other...and you should be set to go.

All the best
:thumbsup:

timgolding
11-01-2006, 04:22 PM
Thanks for the reply. The only thing is I wanted the slider to show actual web pages in frames not images. The reason being I wanted them to be able to interact with the webpages. This is why I need to add pause and play, so they get more than 20 secs to browse the page. Then I can resume the silde show and it will continue flicking through the pages.

timgolding
11-01-2006, 04:35 PM
Ok I have looked at your code and there was enough informtion there for me to accomplish the task, so thanks for that. I kinda dont understand it but it works all the same. :) Here is the code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en-us>
<head>
<?PHP
if (isset($_GET['i'])) $i=$_GET['i']; else $i=0;
$pages=array('http://jamiescomputerclub.org.uk','template/template.html','http://pinman-designs.co.uk','http://jamiesmicroprop.org.uk','http://ssj.org.uk');
$total=sizeof($pages);

echo'
<title>Jamie\'s Web Show - '.$pages[$i].'</title>
</head>
<body>
<IFRAME SRC="'.$pages[$i].'" SCROLLING="auto" WIDTH="100%" HEIGHT="100%" ></IFRAME>';

if($i+2>$total) $i=0;
else $i++;

echo'
<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the next page in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>

<script>
<!--

/*
Count down then redirect script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

//change below target URL to your own
var targetURL="http://localhost/openday/index.php?i='.$i.'"
//change the second to start counting down from
var countdownfrom=30


var currentsecond=document.redirect.redirect2.value=countdownfrom+1


function start_slides()
{
timer_id = window.setTimeout( "countredirect()", 1000 );
}
function stop_slides()
{
window.clearTimeout( timer_id );
}

function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
timer_id = window.setTimeout( "countredirect()", 1000 );
}



countredirect()
//-->
</script>

<form>
<input type="button" value="start" onclick = "javascript: start_slides();"/>
<input type="button" value="stop" onclick = "javascript: stop_slides();"/>
</form>


</body>
</html>';

?>


Thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum