# Auto Rotate Slideshow

**URL:** <https://forum.kirupa.com/t/auto-rotate-slideshow/260441>\
**Category:** web dev\
**Created:** [May 15, 2008, 4:56pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441 "2008-05-15T16:56:02Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 15, 2008, 4:56pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/1 "2008-05-15T16:56:02Z")

</div>

I have a slideshow script although I’m not quite happy with it, I’d like it to auto rotate through the images every 3 seconds, but I’ve got no idea how to do it. Any ideas, help? Thanks =)

```auto
var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;

var Picture = new Array();
var Caption = new Array();
var showHot = false;

Picture[1] = 'portfolio/portfolio_photo_01.jpg';
Picture[2] = 'portfolio/portfolio_photo_02.jpg';
Picture[3] = 'portfolio/portfolio_photo_03.jpg';
Picture[4] = 'portfolio/portfolio_photo_04.jpg';
Picture[5] = 'portfolio/portfolio_photo_05.jpg';
Picture[6] = 'portfolio/portfolio_photo_06.jpg';

Caption[1] = "Here you will enter your description for Portfolio Photo #1!";
Caption[2] = "Here you will enter your description for Portfolio Photo #2!";
Caption[3] = "Here you will enter your description for Portfolio Photo #3!";
Caption[4] = "Here you will enter your description for Portfolio Photo #4!";
Caption[5] = "Here you will enter your description for Portfolio Photo #5!";
Caption[6] = "Here you will enter your description for Portfolio Photo #6!";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=1)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

```

---

<div class="post-metadata">

**Author:** ![jkanakaraj](https://avatars.discourse-cdn.com/v4/letter/j/90db22/32.png) [@jkanakaraj](https://forum.kirupa.com/u/jkanakaraj)\
**Post date:** [May 16, 2008, 6:56am UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/2 "2008-05-16T06:56:36Z")

</div>

try using the setInterval() method, and creating a counter that increases by one when the function is loaded…

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 19, 2008, 5:35pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/3 "2008-05-19T17:35:25Z")

</div>

Is someone able to add the setInterval into the code for me, I’m having some issues =( It’d be **[U]MUCH[/U]** appreciated, thanks.

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [May 19, 2008, 6:05pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/4 "2008-05-19T18:05:14Z")

</div>

Just add this into your code, and put a default value for how that can still be overridden by function calls from your controls.

```auto

//new function header for control:
function control(how="F"){

//New function to add in
window.onload=function()
{
    setInterval("control", 3000);
}

```

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 20, 2008, 2:52pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/5 "2008-05-20T14:52:28Z")

</div>

A little confused, are you able to insert the above mentioned into the code and explain to me how it works? I attempted it, but doesn’t do anything… sorry I’m a hassle =(

---

<div class="post-metadata">

**Author:** ![thats\_all\_folks](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@thats\_all\_folks](https://forum.kirupa.com/u/thats_all_folks)\
**Post date:** [May 20, 2008, 3:01pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/6 "2008-05-20T15:01:53Z")

</div>

I think also your array needs to start with 0, Picture[0], Picture[1] ect

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [May 20, 2008, 7:46pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/7 "2008-05-20T19:46:10Z")

</div>

This is how it should look in action. If I were you though, I would download Firebug for Firefox, it will tell you exactly where your JS errors lie.

```auto
var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;

var Picture = new Array();
var Caption = new Array();
var showHot = false;

Picture[1] = 'portfolio/portfolio_photo_01.jpg';
Picture[2] = 'portfolio/portfolio_photo_02.jpg';
Picture[3] = 'portfolio/portfolio_photo_03.jpg';
Picture[4] = 'portfolio/portfolio_photo_04.jpg';
Picture[5] = 'portfolio/portfolio_photo_05.jpg';
Picture[6] = 'portfolio/portfolio_photo_06.jpg';

Caption[1] = "Here you will enter your description for Portfolio Photo #1!";
Caption[2] = "Here you will enter your description for Portfolio Photo #2!";
Caption[3] = "Here you will enter your description for Portfolio Photo #3!";
Caption[4] = "Here you will enter your description for Portfolio Photo #4!";
Caption[5] = "Here you will enter your description for Portfolio Photo #5!";
Caption[6] = "Here you will enter your description for Portfolio Photo #6!";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how="F"){
if (showHot){
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=1)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

//New function to add in

window.onload=function()
{
    setInterval("control", 3000);
}

```

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 21, 2008, 1:43pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/8 "2008-05-21T13:43:02Z")

</div>

Not working for me mate =S

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [May 21, 2008, 3:58pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/9 "2008-05-21T15:58:04Z")

</div>

Did it work before? Just wondering…

This code should work.

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 21, 2008, 7:44pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/10 "2008-05-21T19:44:55Z")

</div>

Yes, it did quite unusual =/

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 21, 2008, 8:10pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/11 "2008-05-21T20:10:09Z")

</div>

I really need to try and get this working =( Here’s the page it’s for, the portfolio slideshow on the right,

**Link:** [http://www.brandnu.com.au/evan/index.php](http://www.brandnu.com.au/evan/index.php)

Any help will be much appreciated, possibly awarded if you’d like something in return for helping me out, need this done that urgently.

---

<div class="post-metadata">

**Author:** ![evAN1](https://avatars.discourse-cdn.com/v4/letter/e/e47c2d/32.png) [@evAN1](https://forum.kirupa.com/u/evAN1)\
**Post date:** [May 22, 2008, 4:43pm UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/12 "2008-05-22T16:43:02Z")

</div>

**bump!**

---

<div class="post-metadata">

**Author:** ![AdamElvis](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@AdamElvis](https://forum.kirupa.com/u/AdamElvis)\
**Post date:** [May 26, 2008, 1:22am UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/13 "2008-05-26T01:22:30Z")

</div>

[quote=\_evAN;2329311]I really need to try and get this working =( Here’s the page it’s for, the portfolio slideshow on the right,

**Link:** [http://www.brandnu.com.au/evan/index.php](http://www.brandnu.com.au/evan/index.php)

Any help will be much appreciated, possibly awarded if you’d like something in return for helping me out, need this done that urgently.[/quote]

Hi,  
You can see my mark-up at this site: [http://www.millpondhomes.ca/galleryslide\_show.html](http://www.millpondhomes.ca/galleryslide_show.html)

You have to keep five things in mind:

1. equal number of images to quotes
2. make sure you have the correct directly path for your images or the slideshow will just sit static
3. make sure you onLoad entered as I have (do not notate the images)
4. note the name=PictureBox on the static image place holder
5. You will notice my modification for the Captions, the script normally only has one Caption, but I needed more flexibility so I expanded it. It is not my original script, but it works awesomely and if you copy as you see it from my site, you can use it for free.

Oh, I guess there is one more thing. If you are planning to use the caption area, notice that it is attached to the \<td id=“CaptionBox” class=“Caption”\> label. Hope you make out okay and let me know when you are done with it, I would like to see it in action.

Lastly, you seem to have a NEXT/PREVIOUS show running, am I seeing the correct page? Will those tabs be coming out? Because as you know you can’t run two ID’s on an image area and expect both scripts to run it.  
Adam

---

<div class="post-metadata">

**Author:** ![AdamElvis](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@AdamElvis](https://forum.kirupa.com/u/AdamElvis)\
**Post date:** [May 26, 2008, 2:40am UTC](https://forum.kirupa.com/t/auto-rotate-slideshow/260441/14 "2008-05-26T02:40:06Z")

</div>

Now here is one little twist for someone out there. I would like to run to different rotations of the SlideShow and can’t get the array order figured out. I was setting the second iteration with the addition of ‘2’ to each tag, but that didn’t work. Here is the primary script, any advice would be appreciated.

\<script type=“text/javascript”\>

// Set the slideshow speed (in milliseconds)  
var SlideShowSpeed = 1500;

// Set the duration of crossfade (in seconds)  
var CrossFadeDuration = 30;

var Picture = new Array(); // don’t change this

Picture[1] = ‘images/banner\_warehousesale\_04.gif’;  
Picture[2] = ‘images/banner\_warehousesale\_01.gif’;  
Picture[3] = ‘images/banner\_warehousesale\_02.gif’;  
Picture[4] = ‘images/banner\_warehousesale\_03.gif’;  
Picture[5] = ‘images/banner\_warehousesale\_04.gif’;  
Picture[6] = ‘images/banner\_warehousesale\_01.gif’;  
Picture[7] = ‘images/banner\_warehousesale\_02.gif’;  
Picture[8] = ‘images/banner\_warehousesale\_03.gif’;  
Picture[9] = ‘images/banner\_warehousesale\_04.gif’;  
Picture[10] = ‘images/banner\_warehousesale\_01.gif’;  
Picture[11] = ‘images/banner\_warehousesale\_02.gif’;  
Picture[12] = ‘images/banner\_warehousesale\_03.gif’;  
Picture[13] = ‘images/banner\_warehousesale\_04.gif’;  
Picture[14] = ‘images/banner\_warehousesale\_01.gif’;  
Picture[15] = ‘images/banner\_warehousesale\_02.gif’;  
Picture[16] = ‘images/banner\_warehousesale\_03.gif’;  
Picture[17] = ‘images/banner\_warehousesale\_04.gif’;  
Picture[18] = ‘images/banner\_warehousesale\_01.gif’;  
Picture[19] = ‘images/banner\_warehousesale\_02.gif’;  
Picture[20] = ‘images/banner\_warehousesale\_03.gif’;

var tss;  
var iss;  
var jss = 1;  
var pss = Picture.length-1;  
var preLoad = new Array();  
for (iss = 1; iss \< pss+1; iss++){  
preLoad[iss] = new Image();  
preLoad[iss].src = Picture[iss];}  
function runSlideShow(){  
if (document.all){  
document.images.PictureBox.style.filter=“blendTrans(duration=2)”;  
document.images.PictureBox.style.filter=“blendTrans(duration=CrossFadeDuration)”;  
document.images.PictureBox.filters.blendTrans.Apply();}  
document.images.PictureBox.src = preLoad[jss].src;  
if (document.all) document.images.PictureBox.filters.blendTrans.Play();  
jss = jss + 1;  
if (jss \> (pss)) jss=1;  
tss = setTimeout(‘runSlideShow()’, SlideShowSpeed);  
}  
\</script\>