PDA

Click to See Complete Forum and Search --> : Problem with Javascript, please help

LindaQ
09-21-2003, 11:17 PM
Hello,

I have a script which works fine on its own, but when I try to insert it multiple times (because I want more than one Slideshow to run on the page), it doesn't work properly.

I have tried to fix the problem by calling the script Slideshow1, Slideshow2 etc both in the script, and in the Onload command, but it still won't work properly (it uses the same images for all slideshows).

Here is a copy of the script, or if somebody has a better one for me to use I would be thrilled -
<!-- THREE STEPS TO INSTALL FADING SLIDE SHOW:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// 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;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="runSlideShow()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
</td>
</tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 2.13 KB -->


I really look forward to any replies!
96turnerri
09-22-2003, 05:42 AM
heres two of your slide shows next to each you should be able to rearrange them yourself but if you have any troubles post back to this thread

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// 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;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// 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 runSlideShow2() {
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;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow2()', slideShowSpeed);
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="runSlideShow();runSlideShow2()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
<td id="VU" height=150 width=150>
<img src="1.jpg" name'SlideShow2' width=150 height=150>
</td>
</tr>
</table>
<body>
</html>
Khalid Ali
09-22-2003, 05:44 AM
the reason it won't work is that when you insert to instances of the same code they have same variable names and function names and this is wrong.you will need to make sure that everything is unique( in my opinion you probably need to make little changes to make it work for you as many times as you want.

post your pages link as well where you are trying to implement this
96turnerri
09-22-2003, 05:48 AM
isnt that what i did in the above code??? :p
Fang
09-22-2003, 06:30 AM
96turnerri wrote:
isnt that what i did in the above code???
No, variables and names have the same values.
96turnerri
09-22-2003, 06:56 AM
YEAH BUT IT WORKS, PROBABLY IT DIDNT WORK FOR LINDAQ BECAUSE SHE DIDNT KNOW HOW TO HAVE TO SCRIPTS LOADING UP IN THE BODY TAG, BUT MY WAY WORKS, I HAVE TRIED AND TESTED IT FOR 5 SLIDESHOWS

SORRY ALL IN CAPS BUT MY CAPS LOCK KEY IS STUCK :(
Fang
09-22-2003, 07:08 AM
Both functions change the same image (SlideShow)
Redefinition of Pic array - same images
96turnerri
09-22-2003, 07:47 AM
a what???? :confused:

if u on about what im thinking you can change the pictures
LindaQ
09-22-2003, 08:17 PM
Oh great, thank you for the replies. I have just signed in, and will go and try that coding now.

I think what Fang means, is that PIC is an array, and it needs to be identified differently in each code set. I had actually tried doing that, but found that each slideshow still depended on the same lot of images (funnily enough, they all used the pictures from slideshow 2). I will give your coding a go 96Turnerri, if it worked for you, it must hold some promise.... can't type with my fingers crossed but here's hoping! ;)

I will leave a message here to let you know if it works or if I need some more ideas.

Wish me luck!!!
LindaQ
09-22-2003, 08:33 PM
Oh buggar,

Well I tried the code that you gave me 96turnerri, but it didn't work for me?

Here is the page with the coding http://www.keeperofdreams.com.au/slideshowtest.htm

I have previously tried going into the Head Javascript Code part and naming each slideshow 'slideshow1', 'slideshow2' etc. So that each slideshow script, throughout the whole script, wherever there was the wording 'slideshow' I would put a number (so that the whole of the first slideshow script, they would all be slideshow1, the whole of the second slideshow script, they would all be slideshow2, and so on).

I also went into the Body Onload tag and added the onload tag of slideshow1, slideshow2 and so on with ; inbetween them so that multiple onloads would work.

Finally, in the Img tag of where the image was placed on the page I would call it name=slideshow1 etc.

That didn't work. After talking to a friend, he suggested to name each 'Pic' set, a different number (so in Slideshow1, wherever Pic was referenced, I would make it Pic1). All that did was make the slideshows work, but all of them used the images from Slideshow2.

I hope this is making sense, if not, please tell me and I will try to explain better.

Anyway, I can not get several individual slideshows working, using their own set of images. Are there any other ideas, or does somebody have a better code? This is driving me absolutely insane :mad:
96turnerri
09-22-2003, 08:53 PM
well i cant see where the slide show is and i cant get access to ur site becuasse some password thing keeps coming up, ill have a look at the code see if it can be simplified
96turnerri
09-22-2003, 09:03 PM
try this

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// 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;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

<SCRIPT LANGUAGE="JavaScript">
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[5] = 'pic1.jpg'
Pic[6] = 'pic1.jpg'
Pic[7] = 'pic1.jpg'
Pic[8] = 'pic1.jpg'
Pic[9] = 'pic1.jpg'

// do not edit anything below this line
var t;
var l = 0;
var p = Pic.length;
var preLoad = new Array();
for (k = 0; k < p; k++) {
preLoad[k] = new Image();
preLoad[k].src = Pic[k];
}
function runSlideShow2() {
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[l].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
l = l + 1;
if (l > (p - 1)) j = 0;
t = setTimeout('runSlideShow2()', slideShowSpeed);
}
</script>
</HEAD>

<BODY onLoad="runSlideShow();runSlideShow2()">


<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
<td id="VU" height=150 width=150>
<img src="1.jpg" name'SlideShow2' width=150 height=150>
</td>
</tr>
</table>
<body>
</html>
LindaQ
09-22-2003, 09:15 PM
Oh sorry about the password, it wasn't coming up for me (I have part of the site in a password protected section). You should be able to get past that with the username 'slideshow' and password 'test'.

I will try your new suggestion now, thanks!
LindaQ
09-22-2003, 09:28 PM
Okay, I went in and tried your code (thought the pic number was a great idea, and could be the key). It didn't work. So I went in again and put in some of my own ideas (like changing all references to slideshow2 in the head javascript, to slideshow2...), and it can't find the pictures for the slideshow.

Weird?

Could we nearly have it here?
Fang
09-23-2003, 03:14 AM
Both slideshows run from the same function.
you should be able to see the pattern for adding more slideshows.
Change all img definitions to your own.

<script type="text/javascript">
<!--
// Set slideShowSpeed (milliseconds)
var slideShowSpeed1 = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration1 = 3;
// Specify the image files
var Pic1 = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic1[0]=new Image(150, 150);
Pic1[0].src = 'Images/t1.gif';
Pic1[1]=new Image(150, 150);
Pic1[1].src = 'Images/t2.gif';
Pic1[2]=new Image(150, 150);
Pic1[2].src = 'Images/t3.gif';
Pic1[3]=new Image(150, 150);
Pic1[3].src = 'Images/t4.gif';
Pic1[4]=new Image(150, 150);
Pic1[4].src = 'Images/t5.gif';

// do not edit anything below this line
var t1;
var ImgIdx1 = 0;
var PicLen1 = Pic1.length-1;
function runSlideShow1() {
if (document.all) {
document.images.SlideShow1.style.filter="blendTrans(duration=2)";
document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration1)";
document.images.SlideShow1.filters.blendTrans.Apply();
}
document.images.SlideShow1.src = Pic1[ImgIdx1].src;
if (document.all) {
document.images.SlideShow1.filters.blendTrans.Play();
}
if (++ImgIdx1 > PicLen1) {ImgIdx1=0;}
//t1 = setTimeout('runSlideShow1()', slideShowSpeed1);
}


// Set slideShowSpeed (milliseconds)
var slideShowSpeed2 = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration2 = 3;
// Specify the image files
var Pic2 = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic2[0]=new Image(150, 150);
Pic2[0].src = 'Images/t6.gif';
Pic2[1]=new Image(150, 150);
Pic2[1].src = 'Images/t7.gif';
Pic2[2]=new Image(150, 150);
Pic2[2].src = 'Images/t8.gif';
Pic2[3]=new Image(150, 150);
Pic2[3].src = 'Images/t9.gif';
Pic2[4]=new Image(150, 150);
Pic2[4].src = 'Images/t10.gif';

var t2;
var ImgIdx2 = 0;
var PicLen2 = Pic2.length-1;
function runSlideShow2() {
if (document.all) {
document.images.SlideShow2.style.filter="blendTrans(duration=2)";
document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDuration2)";
document.images.SlideShow2.filters.blendTrans.Apply();
}
document.images.SlideShow2.src = Pic2[ImgIdx2].src;
if (document.all) {
document.images.SlideShow2.filters.blendTrans.Play();
}
if (++ImgIdx2 > PicLen2) { ImgIdx2=0; }
//t2 = setTimeout('runSlideShow2()', slideShowSpeed2);
}

var t=null;
var slideShowSpeed=2000;
function runSlideShow() {
runSlideShow1();
runSlideShow2();
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//-->
</script>
</head>
<body onload="runSlideShow();">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU1" height="150" width="150">
<img src="Images/t1.gif" name='SlideShow1' width="150" height="150">
<td id="VU2" height="150" width="150">
<img src="Images/t6.gif" name='SlideShow2' width="150" height="150">
</td>
</tr>
</table>
<body>
LindaQ
09-24-2003, 09:48 PM
Thanks Fang,

I have tried your coding as well. You can see it at www.keeperofdreams.com.au/slideshowtest.htm (username 'slideshow' password 'test'). It still doesn't work on there. Has that script worked for any of you, or did you just write them for the reply to this thread? Just wondering, because none of them seem to work at all.

When I tried the original script on its own it worked, and when I put in more than one slideshow, they worked, but used all the same images (instead of using the different images referenced in the different slideshows). I just can't seem to get more than one slideshow working on a page, using different images in each slideshow.

I have tried many ideas.... if any of you have any more for me I would be so very grateful!!! Or if somebody has an alternate script that they know works, I would love to see it.
LindaQ
09-25-2003, 10:31 PM
YAAAY,

Fangs coding is working (I had left a silly error in the Body command line), derrr.

The only part that I can't get working to my satisfaction, is the timing. If you go to www.keeperofdreams.com.au/slideshowtest.htm (remember username 'slideshow' and password 'test'), you will see what I mean. Although I have put different values in the speed of the slideshows, they are both using the one speed (I assume from the speed setting in the bottom of the Head Javascript coding for them). I did try to take that line out, but the slideshow wouldn't run without it... here is the line to save you looking -

var t=null;
var slideShowSpeed=5000;
function runSlideShow() {
runSlideShow1();
runSlideShow2();
t = setTimeout('runSlideShow()', slideShowSpeed);
}

Any ideas on how to get them to work with their own speed settings (they have individual speed settings in their coding, but they are ignoring this), so that each slideshow can change at different timing?

Thank you very much for your time,

Linda.
Fang
09-26-2003, 01:08 AM
uncomment the two lines:
//t1=blah and //t2=blah
Change the onload to onload="runSlideShow1();runSlideShow2();"
Change slideShowSpeed1 and slideShowSpeed2 to required values.