[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Image Slide Show

Posted on 2004-11-04
9
Medium Priority
?
273 Views
Last Modified: 2006-11-17
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.
0
Comment
Question by:itPHP
  • 3
  • 3
  • 3
9 Comments
 
LVL 12

Expert Comment

by:minichicken
ID: 12492423
<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
 
LVL 12

Expert Comment

by:minichicken
ID: 12492460
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
 

Author Comment

by:itPHP
ID: 12492713
please read my question, this script doesnt meet my requirements.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 12

Expert Comment

by:minichicken
ID: 12496628
oops sorry, thought you just looking for a image slide show function.....
My apologies....
0
 
LVL 19

Expert Comment

by:dakyd
ID: 12497063
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
 

Author Comment

by:itPHP
ID: 12503204
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
 
LVL 19

Expert Comment

by:dakyd
ID: 12507147
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
 

Author Comment

by:itPHP
ID: 12522668
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
 
LVL 19

Accepted Solution

by:
dakyd earned 1600 total points
ID: 12525469
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question