How can I have a series of photos rotate automatically? Frontpage

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I am trying to have what looks like one graphic -- that stays the same in
size but has rotating photos -- that change automatically every three or four
seconds and loop continuously. ... I know that I have done it years ago,
just can't find the feature or the way to address. Thanks for any help or
suggestions.
 
Are you talking about an animated gif?
--
===
Tom Willett
Microsoft MVP - FrontPage
---
FrontPage Support:
http://www.frontpagemvps.com/
===
|I am trying to have what looks like one graphic -- that stays the same in
| size but has rotating photos -- that change automatically every three or
four
| seconds and loop continuously. ... I know that I have done it years ago,
| just can't find the feature or the way to address. Thanks for any help or
| suggestions.
 
Sue-Meri said:
I am trying to have what looks like one graphic -- that stays the
same in size but has rotating photos -- that change automatically
every three or four seconds and loop continuously. ... I know that I
have done it years ago, just can't find the feature or the way to
address. Thanks for any help or suggestions.
Click to expand...

You might like to try this.

Of course you will have to amend the details of the pictures loaded

<html>
<head>

<!-- Original: Robert Bui ([email protected]) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script language="javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = 'image' + image_index
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</head>
<body onload="rotateImage('rImage')">

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>
 
No actually three individual non motion photos that will be played
continuously one after the other -- at 3 second intervals
Thanks for any thoughts and sorry for my delayed response
 
Thank you

Trevor L. said:
Sue-Meri said:
I am trying to have what looks like one graphic -- that stays the
same in size but has rotating photos -- that change automatically
every three or four seconds and loop continuously. ... I know that I
have done it years ago, just can't find the feature or the way to
address. Thanks for any help or suggestions.
Click to expand...

You might like to try this.

Of course you will have to amend the details of the pictures loaded

<html>
<head>

<!-- Original: Robert Bui ([email protected]) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script language="javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = 'image' + image_index
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</head>
<body onload="rotateImage('rImage')">

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Back
Top