Auto Rotate Slideshow

evAN1 · May 15, 2008, 4:56pm

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 =)

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();
}}

jkanakaraj · May 16, 2008, 6:56am

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

evAN1 · May 19, 2008, 5:35pm

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.

actionAction · May 19, 2008, 6:05pm

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


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

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

evAN1 · May 20, 2008, 2:52pm

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 =(

thats_all_folks · May 20, 2008, 3:01pm

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

actionAction · May 20, 2008, 7:46pm

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.

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);
}

evAN1 · May 21, 2008, 1:43pm

Not working for me mate =S

actionAction · May 21, 2008, 3:58pm

Did it work before? Just wondering…

This code should work.

evAN1 · May 21, 2008, 7:44pm

Yes, it did quite unusual =/

evAN1 · May 21, 2008, 8:10pm

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

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

evAN1 · May 22, 2008, 4:43pm

bump!

AdamElvis · May 26, 2008, 1:22am

[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

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

You have to keep five things in mind:

equal number of images to quotes
make sure you have the correct directly path for your images or the slideshow will just sit static
make sure you onLoad entered as I have (do not notate the images)
note the name=PictureBox on the static image place holder
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

AdamElvis · May 26, 2008, 2:40am

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.

// 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>

Topic	Replies	Views
Auto-rotation for a slideshow through actionscript	75	August 3, 2005
Java script help	41	November 1, 2008
Another slideshow thread - not been asked, I promise! flash	77	July 30, 2007
Preloading images - Automated slideshow flash	67	November 23, 2007
Need simple auto scroll slideshow code web dev	122	October 25, 2007

Auto Rotate Slideshow

Follow:

Popular

Loose Ends

Auto Rotate Slideshow

Related topics

Follow:

Popular

Loose Ends