PDA

Click to See Complete Forum and Search --> : Cycling Images

startrekfan
08-08-2003, 02:57 PM
I used the "Cycling Images" Code, however, I would like to know if there is a way to implement the same code for multiple sets of images, and if so, how would that be accomplished.. would it be several instances of the same script or could you section it off in the same script?? Since I'm new to scripting, any help and suggestions would be greatly appreciated. I look forward to your responses.
David Harrison
08-08-2003, 03:03 PM
The "Cycling Images" code, I've written a couple of those and so have a few other people most likely. So would you care to show us which one you mean. I have a script that could be easily modified to rotate several images on a page simultaneously, if that's what you want.
Charles
08-08-2003, 03:11 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
<!--
Array.prototype.random = function () {return this[Math.round (Math.random() * Math.ceil (this.length / 10) * 10) % this.length]}
// -->
</script>
<div>
<script type="text/javascript">
<!--
document.write('<img alt="[Betie in a bikini]" src="', ['http://www.bettiepage.com/images/photos/bikini/bikini1.jpg', 'http://www.bettiepage.com/images/photos/bikini/bikini2.jpg', 'http://www.bettiepage.com/images/photos/bikini/bikini3.jpg', 'http://www.bettiepage.com/images/photos/bikini/bikini4.jpg'].random(), '">');
// -->
</script>
<noscript><img alt="[Betie in a bikini]" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"></noscript>
</div>
<div>
<script type="text/javascript">
<!--
document.write('<img alt="[Betie with a whip]" src="', ['http://www.bettiepage.com/images/photos/whip/whip1.jpg', 'http://www.bettiepage.com/images/photos/whip/whip2.jpg', 'http://www.bettiepage.com/images/photos/whip/whip3.jpg', 'http://www.bettiepage.com/images/photos/whip/whip4.jpg'].random(), '">');
// -->
</script>
<noscript><img alt="[Betie with a whip]" src="http://www.bettiepage.com/images/photos/whip/whip1.jpg"></noscript>
</div>
startrekfan
08-09-2003, 12:58 AM
<This was to be inserted into the <head> tag>

// JScript source code
// Original: D. Keith Higgs (dkh2@po.cwru.edu)
// This script and many more are available free online at -->
// The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var timeDelay = 1; // change delay time in seconds
var Pix = new Array
("images/pips/Navy%20-%20Red/Commander.jpg"
,"images/pips/Navy%20-%20Yellow/Commander.jpg"
,"images/pips/Navy%20-%20Teal/Commander.jpg"
,"images/pips/Navy%20-%20White/Cmdr.jpg"
,"images/pips/Navy%20-%20Black/Commander.jpg"
,"images/pips/Navy%20-%20Grey/Cmdr.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["CommanderPix"].src = PicCurrent.src;
}
// End -->


< This part was made into an actual javascript file using Microsoft Visual Studio.NET>


<This was to be inserted into the <body> tag>

<BODY OnLoad="startPix()">

<img name="ChangingPix" src="%YourImageHere">

That is the code that I had. If there is one that could be used to work with multiple images, it would be greatly appreciated. Also, if you would like to see the images in question, they can be found at http://www.iga.alturl.com/ranks.html ... those are the images that I wish to manipulate, I have 6 different colors of the same picture that I would like to cycle. Any and all help is welcomed. I thank you in advance for your help in this development.
moo2cow013
10-07-2003, 11:34 AM
I think I'm having the same trouble--I found the script at the javascript source place, copied and pasted it, substituted my images for the img.jpg spots, and only the first image shows--the others do not cycle through. Is there something else that I need to do? Perhaps you and I are having the same problem?

Heather
David Harrison
10-07-2003, 11:41 AM
Take a gander at some of these, do they do what you want:
moo2cow013
10-07-2003, 12:20 PM
Thanks, Lavalamp. I used the code from your cycle through images.html file, and now 2 out of 4 of my images rotate. here's what's on my page from the javascript down; any suggestions as to what I'm still doing incorrectly? -H

<script type="text/javascript"><!--

var imgarray = new Array();
imgarray[0] = "hasten.gif";
imgarray[1] = "hasten_looks.gif";
imgarray[2] = "hasten_power.gif";
imgarray[3] = "hasten_performance.gif";

var num=0;

function changeimg(){

document.getElementById("change").src=imgarray[num];

num=(num==imgarray.length-1)?0:num+1;

setTimeout('changeimg()', 2000);

}

//--></script>
</script>
</HEAD>


<!-- WHAT THE BODY OF THE SITE WILL LOOK LIKE (FONT, TEXT, ETC) -->
<bg="#fafad2" text="#FF0095" link="00008B" vlink="00008B" alink="008000">
<body onload="changeimg()">
<font face="verdana" size="-1">
<center>
<style type="text/css">
body
{
background-image:
url("dkgreenracerbkg3.jpg");
background-repeat: repeat-y; background-attachment:
fixed
}
</style>

<!-- Menu Table -->
<ol><ol><table border="0" cellspacing="5" cellpadding="5" width="30" align="left">
<tr><td align="center">
<a href="farm.html"><img border="0" src="horseshoelink.gif"> FARM </a></td></tr>
<tr><td align="center"><a href="foals.html"><img border="0" src="horseshoelink.gif"> FOALS </a></td></tr>
<tr><td align="center"><a href="links.html"><img border="0" src="horseshoelink.gif"> LINKS </a></td></tr>
<tr><td align="center"><a href="contact.html"><img border="0" src="horseshoelink.gif"> CONTACT US </a> </td></tr>
</table>
<br>

<ol><table border="1" cellspacing="5" cellpadding="5" align="right">
<td align="center" width="500">
<br>
<img src="shultzfarmspresents4.gif">
<br>
<br>
<img src="hasten.gif" border="0" id="change" alt="Rotate Image">

<br>
</td></table>
</body>
</html>
David Harrison
10-07-2003, 12:45 PM
I'm not too sure what you mean when you say, "2 out of 4 of my images rotate." So can you post the script (with pics), or provide a link to your script online.
moo2cow013
10-08-2003, 11:42 AM
The actual script is in my above post, and just two of the four pictures in my array were flipping--the other two never showed. However, it might have been my server or speed, because I put in a script to preload my images, and now they are all working nicely. I do thank you for your help--I had been going insane trying to make it work! -H
David Harrison
10-08-2003, 02:20 PM
Happy to help. :)