/    Sign up×
Community /Pin to ProfileBookmark

Javascript Image Rotation

Hi Everyone,
Can somebody help me with the following image transition/rotation code?
The code transitions and rotates a single image no problem but I need to
transition and rotate more than one image.

[B]Now:[/B]
Image 1 – Image 1B, Image 1C, Image 1D, Etc…

[B]Proposed:[/B]
Image 1 – Image 1B, Image 1C, Image 1D, Etc…
Image 2 – Image 2B, Image 2C, Image 2D, Etc…

Here is the code:

<SCRIPT LANGUAGE=”JavaScript”>
<!–//–><![CDATA[//><!–

// =======================================

// set the following variables

// =======================================

// Set slideShowSpeed (milliseconds)

var slideShowSpeed = 9000

// Duration of crossfade (seconds)

var crossFadeDuration = 3

// Specify the image files

var Pic = new Array() // don’t touch this

// to add more images, just continue

// the pattern, adding to the array below

Pic[0] = ‘/images/image1.jpg’

Pic[1] = ‘/images/image2.jpg’

Pic[2] = ‘/images/image3.jpg’

// =======================================

// do not edit anything below this line

// =======================================

var t

var j = 0

var p = Pic.length

var preLoad = new Array()

for (i = 0; i < p; i++){

preLoad[i] = new Image()

preLoad[i].src = Pic[i]

}

function runSlideShow(){

if (document.all){

document.images.SlideShow.style.filter=”blendTrans(duration=2)”

document.images.SlideShow.style.filter=”blendTrans(duration=crossFadeDuration)”

document.images.SlideShow.filters.blendTrans.Apply()

}

document.images.SlideShow.src = preLoad[j].src

if (document.all){

document.images.SlideShow.filters.blendTrans.Play()

}

j = j + 1

if (j > (p-1)) j=0

t = setTimeout(‘runSlideShow()’, slideShowSpeed)

}

//–><!]]>
</SCRIPT>

Cheers,
Tom

to post a comment
JavaScript

19 Comments(s)

Copy linkTweet thisAlerts:
@WebTechOct 08.2005 — Just a thought, not knowing where you're going with this, but how about multidimentional arrays?

Pic[3][3] = { "/images/image1.jpg", "/images/image2.jpg", "/images/image3.jpg"};
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 08.2005 — Thanks WebTech. Can you please explain?
Copy linkTweet thisAlerts:
@jwlnewsomeOct 08.2005 — try this it might be what you want

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

// Set slideShowSpeed (milliseconds)

var slideShowSpeed = 5000;

// Duration of crossfade (seconds)

var crossFadeDuration = 3;

// Specify the image files

var Pic = new Array();

// to add more images, just continue

// the pattern, adding to the array below

Pic[0] = '1.jpg'

Pic[1] = '2.jpg'

Pic[2] = '3.jpg'

Pic[3] = '4.jpg'

Pic[4] = '5.jpg'

// do not edit anything below this line

var t;

var j = 0;

var p = Pic.length;

var preLoad = new Array();

for (i = 0; i < p; i++) {

preLoad[i] = new Image();

preLoad[i].src = Pic[i];

}

function runSlideShow() {

if (document.all) {

document.images.SlideShow.style.filter="blendTrans(duration=2)";

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.SlideShow.filters.blendTrans.Apply();

}

document.images.SlideShow.src = preLoad[j].src;

if (document.all) {

document.images.SlideShow.filters.blendTrans.Play();

}

j = j + 1;

if (j > (p - 1)) j = 0;

t = setTimeout('runSlideShow()', slideShowSpeed);

}

// End -->

</script>









<BODY onLoad="runSlideShow()">







<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="VU" height=150 width=150>

<img src="1.jpg" name='SlideShow' width=150 height=150>

</td>

</tr>

</table>



john
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 09.2005 — Thanks for the help. Here is a link to what I am working on:

http://www.hssi.ca/test.htm

I need the script to be able to handle all 6 of the images with each of the six images having a seperate sequence of images. I tried modifying the script and created 6 different scripts: Slideshow(), Slideshow2(), Slideshow3(),Slideshow4, Slideshow5(), Slideshow6() but it rotated the same images across all 6.
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 09.2005 — Can someone else please comment?
Copy linkTweet thisAlerts:
@cyber1Oct 10.2005 — Sometimes its just easier to look for something a bit closer to what you need.

Remember, Google is your friend.

This one looks like what you are looking for and also looks like it would be easy to add as many sets of images rotated as you want.

[URL=http://www.dyn-web.com/javascript/rotate-img/]http://www.dyn-web.com/javascript/rotate-img/[/URL]

click on second example.

-Bill
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 10.2005 — I managed to modify the script and was able to get multiple images to work. I just modified and tested it on 2 images but the code could be repeated to work on all 6.

I have a new problem now....the image transition fade does not work The image just flips to the new image. :eek:

http://www.hssi.ca/test3.htm

Any ideas??
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 10.2005 — Any Ideas? ?
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 11.2005 — Anyone? ?
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 12.2005 — Anyone? ?
Copy linkTweet thisAlerts:
@konithomimoOct 14.2005 — Here is a good way. The code below is for a simple fading slide show:

STEP ONE: Paste this code into the HEAD of your HTML document

<i>
</i>&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i &lt; p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j &gt; (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End --&gt;
&lt;/script&gt;


STEP TWO: Insert the onLoad event handler into your BODY tag
<i>
</i>
&lt;BODY onLoad="runSlideShow()"&gt;

STEP THREE: Copy this code into the BODY of your HTML document

<i>
</i>
&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
&lt;tr&gt;
&lt;td id="VU" height=150 width=150&gt;
&lt;img src="1.jpg" name='SlideShow' width=150 height=150&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


EDIT: I didn't realize that jwlnewsome had already seen the code from my other post and put it here (i forgot that he was the one I gave the code to). As long as you follow the steps correctly the code should work perfectly.
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 14.2005 — Thanks but I am a little confused. The problem I have is not with rotating a single image but with rotating multiple images as per previous post
Copy linkTweet thisAlerts:
@konithomimoOct 14.2005 — The above script should do what you want. It takes in the image name, then loads it by fading it in, keeps it loaded for a predetermined amount of time, and then fades out and loads a new image.
Copy linkTweet thisAlerts:
@tommy_boyauthorOct 15.2005 — I managed to modify the script and was able to get multiple images to work. I just modified and tested it on 2 images but the code could be repeated to work on all 6.

I have a new problem now....the image transition fade does not work The image just flips to the new image.

http://www.hssi.ca/test3.htm

Any ideas?
Copy linkTweet thisAlerts:
@konithomimoOct 15.2005 — All that you did was copy and paste runSlideShow() and rename it runSlideShow2(). you kept all of the variables the same, which is not a good thing to do. Secondly, you are calling the same function 2 times at the same instance.
Copy linkTweet thisAlerts:
@konithomimoOct 15.2005 — I didn't take the time to utilize the array, but here is the basic conxept of how to do it. You can see how the code has to be and then use the array to make it simpler if you want. (this will rotate/fade all six images)
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;



&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://www.hssi.ca/images/tussaudsmain2.jpg'
Pic[1] = 'http://www.hssi.ca/images/detroit.jpg'
Pic[2] = 'http://www.hssi.ca/images/xboxmain2.jpg'
Pic[3] = 'http://www.hssi.ca/images/hairspraymain.gif'
Pic[4] = 'http://www.hssi.ca/images/nsync.jpg'
Pic[5] = 'http://www.hssi.ca/images/mainback.gif'

// do not edit anything below this line
var t;
var j = 0;
var k = j+1;
var l = j+2;
var m = j+3;
var n = j+4;
var o = j+5;


var p = Pic.length;
var preLoad = new Array();
for (i = 0; i &lt; p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();


document.images.SlideShow2.style.filter="blendTrans(duration=2)";
document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow2.filters.blendTrans.Apply();


document.images.SlideShow3.style.filter="blendTrans(duration=2)";
document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow3.filters.blendTrans.Apply();


document.images.SlideShow4.style.filter="blendTrans(duration=2)";
document.images.SlideShow4.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow4.filters.blendTrans.Apply();


document.images.SlideShow5.style.filter="blendTrans(duration=2)";
document.images.SlideShow5.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow5.filters.blendTrans.Apply();

document.images.SlideShow6.style.filter="blendTrans(duration=2)";
document.images.SlideShow6.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow6.filters.blendTrans.Apply();
}

document.images.SlideShow.src = preLoad[j].src;
document.images.SlideShow2.src = preLoad[k].src;
document.images.SlideShow3.src = preLoad[l].src;
document.images.SlideShow4.src = preLoad[m].src;
document.images.SlideShow5.src = preLoad[n].src;
document.images.SlideShow6.src = preLoad[o].src;


if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
document.images.SlideShow2.filters.blendTrans.Play();
document.images.SlideShow3.filters.blendTrans.Play();
document.images.SlideShow4.filters.blendTrans.Play();
document.images.SlideShow5.filters.blendTrans.Play();
document.images.SlideShow6.filters.blendTrans.Play();
}
j = j + 1;
k = k + 1;
l = l + 1;
m = m + 1;
n = n + 1;
o = o + 1;

if (j &gt; (p - 1)) j = 0;
if (k &gt; (p - 1)) k = 0;
if (l &gt; (p - 1)) l = 0;
if (m &gt; (p - 1)) m = 0;
if (n &gt; (p - 1)) n = 0;
if (o &gt; (p - 1)) o = 0;

t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End --&gt;
&lt;/script&gt;


&lt;/head&gt;

&lt;body onLoad="runSlideShow()"&gt;
&lt;table width="710" height="111" border="1" cellpadding="0" cellspacing="0"&gt;
&lt;tr&gt;
&lt;td id="VU" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/xbox.jpg" name='SlideShow' width=120 height=111&gt;&lt;/td&gt;
&lt;td id="VW" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/tussaudsmain2.jpg" name='SlideShow2' width=120 height=111&gt;&lt;/td&gt;
&lt;td id="VX" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/detroit.jpg" name='SlideShow3' width=120 height=111&gt;&lt;/td&gt;
&lt;td id="VY" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/hairspraymain.gif" name='SlideShow4' width=120 height=111&gt;&lt;/td&gt;
&lt;td id="VZ" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/nsync.jpg" name='SlideShow5' width=120 height=111&gt;&lt;/td&gt;
&lt;td id="V1" height=111 width=120 valign="top"&gt;&lt;img src="http://www.hssi.ca/images/xboxmain2.jpg" name='SlideShow6' width=120 height=111&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@sh_ahmed_85Nov 14.2005 — This is a great topic and i had a great benifit reading it as i'm a starting javascript developer and i have a little question

if i'm rotating one image not multiple images how could i make it change its postion every time it change

thanks
×

Success!

Help @tommy_boy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...