asked on

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.

minichicken

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

minichicken

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>

itPHP

ASKER

please read my question, this script doesnt meet my requirements.

minichicken

oops sorry, thought you just looking for a image slide show function.....
My apologies....

dakyd

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>

itPHP

ASKER

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

dakyd

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>

itPHP

ASKER

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?

ASKER CERTIFIED SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial