PDA

View Full Version : Looking for image rotator scripts

blake_jl
01-30-2008, 05:56 PM
Hi,

I'm looking for 2 different scripts

1. A script that randomly loads an image from a list on each page load.

2. A script that rotates through a list of images while viewing the page.

I have seen the second one before somewhere but not the first one. Can anybody help me out?

Thanks
coothead
01-31-2008, 09:35 AM
Hi there blake_jl,

try these basic examples...

1.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://mysite.orange.co.uk/azygous/images/">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#ccf;
}
#container {
width:110px;
margin:20px auto;
background-color:#fff;
}
#myimage {
display:block;
border:6px double #000;
background-color:#fff;
}
</style>

<script type="text/javascript">

var pics=new Array();
pics[0]='anim.gif';
pics[1]='anim1.gif';
pics[2]='anim2.gif';
pics[3]='anim3.gif';
pics[4]='anim4.gif';
pics[5]='anim5.gif';

window.onload=function() {
randomImage();
}
function randomImage() {

num=Math.floor(Math.random()*pics.length);

document.getElementById('myimage').src=pics[num];
}

</script>

</head>
<body>

<div id="container">
<img id="myimage" src="anim.gif" alt="">
</div>

</body>
</html>

2.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://mysite.orange.co.uk/azygous/images/">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#ccf;
}
#container {
width:110px;
margin:20px auto;
background-color:#fff;
}
#myimage {
display:block;
border:6px double #000;
background-color:#fff;
}
</style>

<script type="text/javascript">

var pics=new Array();
pics[0]='anim.gif';
pics[1]='anim1.gif';
pics[2]='anim2.gif';
pics[3]='anim3.gif';
pics[4]='anim4.gif';
pics[5]='anim5.gif';

var num=0;
var speed=2000;

window.onload=function() {
randomImage();
}
function randomImage() {

num++
if(num==pics.length) {
num=0;
}
document.getElementById('myimage').src=pics[num];
setTimeout('randomImage()',speed);
}

</script>

</head>
<body>

<div id="container">
<img id="myimage" src="anim.gif" alt="">
</div>

</body>
</html>
trollmannen
01-31-2008, 09:41 AM
The 'load-random-image-from-list' function can be achieved without java using PHP if your server supports it:


<?php
$images=array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg');
$rand=rand(1,7);
$image=$images[$rand];
echo'<img src="../images/head/'.$image.'" alt="Image">'
;?>


*Edit: This was kinda stupid of me, because as soon as I posted, I realised that you are technically asking for a client side script and not server side stuff.. Well, anyways.. :rolleyes:
blake_jl
01-31-2008, 02:41 PM
thanks guys.

The php is also helpful. In my research I have seen that it can also be done that way and wondered how.
jos
02-07-2008, 01:21 PM
hey,

i use this little script to rotate a photo on every page load...
work fine for me

<!--
// number of photo's to rotate

NumberOfImagesToRotate = 127;

// Specify the first and last part of the image tag.

FirstPart = '<img src="img/photorotator/picture';
LastPart = '.jpg" height="335" width="150">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
-->