Image Slide Show

im looking for a function that i can pass an array to that will aloow me to skip through images.

I need to be able to pass any number of images in my array.
The function must then step through each of the values and replace an image on my site (this has an id of "graph").
It must also update a hidden form var.

At the moment i have this script that will chage the image and hidden var this may be of use, i dont know.

function Update_Stock(stock)
{
hiddenObj = document.getElementById('stock');
hiddenObj.value = stock;
imgObj  = document.getElementById('stock_graph');
imgObj.src = "graphs/" + stock + ".gif";
}

One other issue is that these graphs are not loaded, so the script will need to load the image before the change.
I also need the abilty to pause and go back and forward using buttons.

I need this to work in Win IE 6, firefox, Safari.

An example of the array i would like to pass is below.

onClick="SlideShowFunction('graph.gif#hiddenid'.'graph2.gif#hiddenid')
is this possible or would i have to change the link to somehting like
onClick="SlideShowFunction('graph.gif#hiddenid@graph2.gif#hiddenid')

and let the function use the @ as a record seperator.
itPHPAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

minichickenCommented:
<html>
</head>
<script language="javascript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// 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'
Pic[3] = 'images/image4.jpg'
Pic[4] = 'images/image5.jpg'
//Pic[5] = 'images/image6.jpg'
//Pic[6] = 'images/image2.jpg'
//Pic[7] = 'images/image3.jpg'
//Pic[8] = 'images/image4.jpg'
//and so on....

// =======================================
// 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(){
   doChange(active_button,'force');
      //alert(document.images.SlideShow);
   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
       j = j + 1;
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
<body onload="runSlideShow()">  
<img src="images/image1.jpg" name="SlideShow" id="SlideShow">
</body>
</html>
0
minichickenCommented:
Sorry there was an error in the previous one:

Here's it again:
***********************************************************************

<html>
</head>
<script language="javascript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// 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'
Pic[3] = 'images/image4.jpg'
Pic[4] = 'images/image5.jpg'
//Pic[5] = 'images/image6.jpg'
//Pic[6] = 'images/image2.jpg'
//Pic[7] = 'images/image3.jpg'
//Pic[8] = 'images/image4.jpg'
//and so on....

// =======================================
// 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
       j = j + 1;
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
<body onload="runSlideShow()">  
<img src="images/image1.jpg" name="SlideShow" id="SlideShow">
</body>
</html>
0
itPHPAuthor Commented:
please read my question, this script doesnt meet my requirements.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

minichickenCommented:
oops sorry, thought you just looking for a image slide show function.....
My apologies....
0
dakydCommented:
Will something like this work?  You have to add a SlideShowArgs attribute to your buttons (or whatever it is that's calling the myShow() function), where this attribute is just a comma-delimited list of arguments.    I also included a global variable called waitTime that will let you control the amount of time between slides.  Finally, I made the "stock" input visible, so you can see it's value, but if you're satisfied it works, then change it from type="text" to type="hidden".  Hope that helps.

<html>
<head>
<script type="text/javascript">
var waitTime = 2000; // time between images (in ms)
function myShow(obj)
{
  var objArgs = obj.getAttribute("SlideShowArgs");
  objArgs = objArgs.replace(/'|"/g, "");
  argArr = objArgs.split(",");
  ctr = 0;

  for (var i = 0, n = argArr.length; i < n; i ++)
  {
    setTimeout("Update_Stock(ctr++)", waitTime * i);
  }
  setTimeout("Update_Stock(0)", waitTime * (n + 1));
  return false;
}

function Update_Stock(theCount)
{
  hiddenObj = document.getElementById('stock');
  hiddenObj.value = argArr[theCount].replace(/^\s*/, "");
  imgObj  = document.getElementById('stock_graph');
  imgObj.src = "graphs/" + argArr[theCount] + ".gif";
}
</script>
</head>

<body>
<p><input type="button" value="Start Slide Show with 2 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid'" />

<p><input type="button" value="Start Slide Show with 3 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid', 'graph3.gif#hiddenid'" /></p>

<img id="stock_graph" src ="" />
<input type="text" id="stock" value="" />
</body>
</html>
0
itPHPAuthor Commented:
dakyd, thats nearly perfect, one small issue it sets the image path to the whole string, ie graph1.gif#hiddenid.gif
can i split this string into 2 vars so my image var will be graph1.gif
0
dakydCommented:
Maybe there's something I'm missing, but if you only want the image path to be "graph1.gif" then couldn't you just pass in "graph1.gif", instead of "graph1.gif#hiddenid.gif"?  I can see the possibility of needing the "#hiddenid.gif" part for the input's value, but if you don't need it there, it might be simpler to just pass in the argument without the "#hiddenid.gif" part.

If it's the latter and you need the part after the # for the input, but not for the img source, then you can use something like this.  Incidentally, if that's not what you want, in the Update_Stock() function, argArr[count] holds the full string (with the #hidden part), and theArg is just the part before the "#".  That should let you put the correct string where you want it.   If you still have questions or something doesn't make sense, though, ask away.  Hope that helps.

<html>
<head>
<script type="text/javascript">
var waitTime = 2000; // time between images (in ms)
function myShow(obj)
{
  var objArgs = obj.getAttribute("SlideShowArgs");
  objArgs = objArgs.replace(/'|"/g, "");
  argArr = objArgs.split(",");
  ctr = 0;

  for (var i = 0, n = argArr.length; i < n; i ++)
  {
    setTimeout("Update_Stock(ctr++)", waitTime * i);
  }
  setTimeout("Update_Stock(0)", waitTime * (n + 1));
  return false;
}

function Update_Stock(theCount)
{
  var theArg = argArr[theCount].split("#")[0];
  hiddenObj = document.getElementById('stock');
  hiddenObj.value = argArr[theCount].replace(/^\s*/, ""); // this sets the value of input
  imgObj  = document.getElementById('stock_graph');
  imgObj.src = "graphs/" + theArg;  // this sets the image's src
}
</script>
</head>

<body>
<p><input type="button" value="Start Slide Show with 2 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid'" />

<p><input type="button" value="Start Slide Show with 3 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid', 'graph3.gif#hiddenid'" /></p>

<img id="stock_graph" src ="" />
<input type="text" id="stock" value="" />
</body>
</html>
0
itPHPAuthor Commented:
sorry for the confusion.

I need the image update with the first part of the var (before the #) and the input updated with withe second part of the var (aftert the #).

I have done this by coping a line of your code and repeating.

var theArg = argArr[theCount].split("#")[0];
var theHiddenArg = argArr[theCount].split("#")[1];

what i cant work out is that only the first image appears to work. For some reason the script is placing a %20 on the second an third image paths before the file name.

Also is the script continuos as it seems to loop once and then stop?
0
dakydCommented:
The "%20" is just the encoded version of a space.  It happens because the comma-delimited lists have spaces after the commas.  So, to make the script take them out for you, you can use the following.  Note, I am assuming that there is no space after the "#".

You're right, the original script did loop through once and stop.  I have now made it continuous, though pressing either of the buttons will interrupt the loop and immediately start the next slide show.  Hope that helps.

<html>
<head>
<script type="text/javascript">
var waitTime = 2000; // time between images (in ms)
var theTimer = null;
function myShow(obj)
{
  if (theTimer != null)
    clearInterval(theTimer);
  var objArgs = obj.getAttribute("SlideShowArgs");
  objArgs = objArgs.replace(/'|"/g, "");
  argArr = objArgs.split(",");
  ctr = 0;
  Update_Stock();

  theTimer = setInterval("Update_Stock()", waitTime);
  return false;
}

function Update_Stock()
{
  var theArg = argArr[ctr].split("#")[0].replace(/^\s+/, "");
  hiddenObj = document.getElementById('stock');
  hiddenObj.value = argArr[ctr].split("#")[1];
  imgObj  = document.getElementById('stock_graph');
  imgObj.src = "graphs/" + theArg;
  ctr = (ctr + 1) % argArr.length;
}
</script>
</head>

<body>
<p><input type="button" value="Start Slide Show with 2 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid2'" />

<p><input type="button" value="Start Slide Show with 3 pictures" onclick="myShow(this);" slideShowArgs="'graph.gif#hiddenid', 'graph2.gif#hiddenid2', 'graph3.gif#hiddenid3'" /></p>

<img id="stock_graph" src ="" />
<input type="text" id="stock" value="" />
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.