why won’t this slidehow script work for me?!

@shereensSep 07.2008

hi, there, i am trying to use the slideshow javascript found at this site: ~~[url]~~http://www.codelifter.com/main/javascript/slideshow2.html[/url]

but i can’t get the following line of code to stick in my webpage:

i follow the directions exactly, but that line above keeps getting ‘spit’ out of my page altogether…in fact, my webpage does not have any body tags per se, it keeps spitting them out when i try to put them in. the webpage functions just fine–no problems–but i can’t get this slideshow script to work b/c i can’t get the ‘onload’ instruction to stay–that body tag keeps getting stripped from my html page…

any ideas as to how to make this script work for me…?

–shereen–

to post a comment

JavaScript

8 Comments(s) _↴

@JMRKERSep 08.2008 — #Let us see the script that is not working.

@shereensauthorSep 08.2008 — #thanx! here is the code as it should be based on the instructions i followed:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 <script>
 // (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 = 4000
 
 // 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]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_01.jpg"
 Pic[1]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_02.jpg"
 Pic[2]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_03.jpg"
 Pic[3]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_04.jpg"
 Pic[4]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_05.jpg"
 Pic[5]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_06.jpg"
 Pic[6]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_07.jpg"
 Pic[7]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_08.jpg"
 Pic[8]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_09.jpg"
 Pic[9]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_10.jpg"
 Pic[10]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_11.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>
 <body onload="runSlideShow()"> 
 <table bordercolor="#66ccff" cellpadding="10" width="90%" align="center" bgcolor="#66ccff">
 <tbody>
 <tr bordercolor="#ffffff" bgcolor="#ffffff">
 <td>
 
 <div align="center"><table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td id="VU" height=349 width=450>
 <img src="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_01.jpg" name='SlideShow' width=450 height=349></td>
 </tr>
 </table>&nbsp; </div>
 .
 .
 .
 .
 </body>
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

and here is the code as it ends up being when i try to upload it to my shopping cart website:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 <script>
 // (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 = 4000
 
 // 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]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_01.jpg"
 Pic[1]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_02.jpg"
 Pic[2]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_03.jpg"
 Pic[3]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_04.jpg"
 Pic[4]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_05.jpg"
 Pic[5]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_06.jpg"
 Pic[6]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_07.jpg"
 Pic[7]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_08.jpg"
 Pic[8]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_09.jpg"
 Pic[9]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_10.jpg"
 Pic[10]="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_11.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> 
 
 <table bordercolor="#66ccff" cellpadding="10" width="90%" align="center" bgcolor="#66ccff">
 <tbody>
 <tr bordercolor="#ffffff" bgcolor="#ffffff">
 <td>
 
 <div align="center"><table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td id="VU" height=349 width=450>
 <img src="https://splas004.secure.omnis.com/store/images/uploads/Customer_Photos/CustomerPhotos_01.jpg" name='SlideShow' width=450 height=349></td>
 </tr>
 </table>&nbsp; </div>
 .
 .
 .
 .
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[NOTE: the vertical ellipses signify a lot more html code that is irrelevant to the issue at hand and i did not want to take up a lot of space here.]

the difference between the two codes above is that the body tag w/the onload instructions keeps getting stripped off immediately after the script ends, so the script is intact, but the instruction in the body to load the slideshow always end up missing.

i've even tried to include the onload instruction in the tbody tag, like this:

<tbody onload="runSlideShow()">

and althougth THAT does not get stripped--it remains inatact--it just doesn't work at all (ie, nothing happens).

it's not a host server problem, as i can run the slideshow successfully as a page on my host server when i include the body tags; but everytime i try to upload it into my shopping cart ("cubecart"), that's when the body tags get stripped and i lose the onload instructions. i instead just get the 1st image/image place holder (so i know that the images are at least being accessed correctly, so that's not the problem either).

i understand that my shopping cart code most likely has a global body tag running through all the pages, so i understand why my manually placed body tags might be getting stripped b/c they might be viewed as duplicate body tags in the page, but i just don't know how to make the onload instructions stick and not get lost or stripped...

--shereen--

@JMRKERSep 08.2008 — #Which browsers are you using and what kind of error messages are you getting?

Also:
on my host server when i include the body tags[/QUOTE]
how many BODY tagS are you using?

and are you putting the 'codelifter' script in the HEAD or the BODY?

@shereensauthorSep 08.2008 — #Which browsers are you using and what kind of error messages are you getting?[/QUOTE]

i am primarily using IE7.0, and i do have mozilla firefox just to check things.

i am not receiving any error messages whatsoever--i just get a page that has the 1st image and no slideshow at all (just a static 1st image).

how many BODY tagS are you using?

and are you putting the 'codelifter' script in the HEAD or the BODY?[/QUOTE]

when i insert the script code into my html page, i am using a total of two body tags--one body tag after the head section which contains the onload instructions: <body onload="runSlideShow()">

and the other 'to close' body tag at the end: </body> (before the </head> tag).

yes, i am putting the codelifter script in the head section--not the body section. however, i should also mention that my php shopping cart webpages do not have any html tags--the pages function without those html tags (or they function with 'invisible' html tags), just as there are no visible body tags. but for sure, i'm placing the script in the head section, before the rest of the body or html code of my page. the ONLY thing that happens is that the <body onload="runSlideShow()"> always gets stripped while the complete script stays intact.

just to be clear, there is really no problem with my website per se--i've been designing webpages myself for the last 2.5 years. so, the absence of html and body tags is not an issue unto itself. i just can't get this specific slideshow script to work at all, whereas i've been able to upload videos, rotating gifs, and other slideshow code without problems. so, there's something specific about this code that just doesn't seem to work with my system which results in the onload instructions being stripped off, but i would like to try to get it to work for the fade-in effect that this slideshow script offers.

--shereen--

@shereensauthorSep 08.2008 — #hi, again, i solved the problem.

my shopping cart has a global index.tpl file which already contains head and body tags. the shopping cart also has the function to upload individual product and news-related webpages, but they all utilize the basic global index.tpl code--one just ends up adding the desired extra code to the 'body' of the individual webpages.

well, as someone else pointed out to me, my body tag with the onload slideshow instructions most likely was getting spit out all the time b/c the system viewed it as a duplicate (since the body tag already existed in the global index.tpl file and i kept adding another in the body of the individual webpage).

based on this information, i decided to add the onload slideshow line of code directly to the body tag in the global index.tpl file. i then added the javascript to the individual webpage--so, now the slideshow onload instructions and script are located in two separate files.

VOILA!! it worked perfectly the first time around. ? :p

thanx! for your time.

--shereen--

@JMRKERSep 08.2008 — #Well, I guess I'm glad I could help even if I just asked a bunch of questions. :eek:

I only asked about the <body> tag because I have had problems in the past when multiples existed. ?

Anyway, Good Luck! ?

@antable93Jul 21.2010 — #I am trying to add five crossfaders to my website, but the CodeLifter script only works for one crossfader. Does anyone know how to make the following script work for five crossfaders?

Code is Below:

[CODE]<script>
 // (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 = 3000
 
 // 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/confidence-coaching-pic.jpg'
 Pic[1] = 'images/Commitment.jpg'
 Pic[2] = 'images/creativity.jpg'
 Pic[3] = 'images/lightbulb-idea.jpg'
 Pic[4] = 'images/leadership.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>[/CODE]

AND CODE TO MAKE SLIDESHOW APPEAR:

[CODE]<td id="VU" height=80 width=120><img src="images/confidence-coaching-pic.jpg" name='SlideShow' width=120 height=80></td>[/CODE]

@antable93Jul 21.2010 — #I found out how to make the script work for multiple crossfaders! Reply to this thread if you want to know how I made it work.

Also in #JavaScript _↴

Pop up that displays only if cookie not present Trying to keep textarea from jumping while inserting text Scrollable divs using javascript

Success!

Help @shereens spread the word by sharing this article on Twitter...

Tweet This

why won’t this slidehow script work for me?!

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

why won’t this slidehow script work for me?!

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴