Where to add some javascript code?

[snowy2007]

Im not sure if I am posting this in the right section so apologies if it is wrong :)

I wish to have some banners on my site that crossfade between different images and have a different "link" url for each image.

I can do this using the "Ultimate Fade-In Slideshow" java code from Dynamic Drive (link : http://www.dynamicdrive.com/dynamici...nslideshow.htm)

The code consists of two sections, the actual javascript code that should be placed in the head section of the html page and then, of course, the line of javascript that calls the function in the correct place on your page.

I can get this working just fine by inserting BOTH the javascript function and the code to call it in the html box when creating a banner.

My question is, is this the correct way to do it? I was thinking that it would be better to have the javascript function included in a header somewhere and then, when creating a banner, i could just call the function in the banner html box? If so, where should I insert the function? I am guessing at includes/templates/template_default/common/tpl_main_pge.php
- is that correct?

Thanks in advance for any advice

[snowy2007]

UPDATE:

I have just added the java function to the beginning of tpl_main_page.php and then, in the banner html just called the function and it works perfectly.

My question now is : Which is the most effecient/best way of doing it :

a) Function in tpl_main_page.php and just call it from the banner html

or

b) Function and the call to it both in the banner html?

I am guessing that the correct way of doing it is option A but that the most effecient would be option B as then, when I don't have any "cross-fade" banners to be displayed then the code wouldn't have to be loaded on every page.

Any thoughts please ?

[tony_sar]

you don't need to alter your template file to add javascript to the HEAD

zc Loads many files for you ..
create your javascript with js extension and add jscript_ to the beginning of the file name

add your js file to jscript folder located in includes /templates/your_custome_template ( if you made override )/jscript folder .

zc will load your javascript and add that to the head of your document..

[snowy2007]

you don't need to alter your template file to add javascript to the HEAD

zc Loads many files for you ..
create your javascript with js extension and add jscript_ to the beginning of the file name

add your js file to jscript folder located in includes /templates/your_custome_template ( if you made override )/jscript folder .

zc will load your javascript and add that to the head of your document..

Thanks for that - GREAT tip there - :)

[snowy2007]

I have tried to add it to the jscript folder as suggested above but it just didn't add it to the page!

I have now discovered a problem (I didn't test it properly before) whether I add it to the actual banner code or to the tpl_main_page.php - the problem is as follows :

WHen I load my shops index page the banner works just fine, fading in and out as it should do!

When I then try to click on a product (or any other page) its stops with an "Internet Explorer Could Not Load The Page" dialog box and then goes to an "Operation Aborted" page!! Help! Please! :)

[snowy2007]

Here is the code for the function by the way :

<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://www.mysite.com/shop/images/faders/b1.jpg", "http://mysite.com","_new"
fadeimages[1]=["http://www.mysite.com/shop/images/faders/b2.jpg", "http://mysite.com","_new"
fadeimages[2]=["http://www.mysite.com/shop/images/faders/b3.jpg", "http://mysite.com","_new"
fadeimages[3]=["http://www.mysite.com/shop/images/faders/b4.jpg", "http://mysite.com","_new"
 
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

And here is the script that calls the function :

<script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 1, 3000, 1, "R")
</script>

[tony_sar]

can you provide link to your site ?

did you name your javascript correctly ? it should be like this

jscript_namehere.js

if missing jscript_ at the beginning , zc wont load the script.

[tony_sar]

your script seems to need prototype frame work. did you add that to your site as well ??

Internet Explorer Could Not Load The Page, is a result of bug in IE , due to when javascript manipulate DOM before page load . there is way around this you can look for it by googling

[snowy2007]

Thanks for the quick reply Tony - much appreciated! I would love this to work as it works just great on the shop home page but breaks the site on any other pages so it is turned off at the moment.

can you provide link to your site ?

did you name your javascript correctly ? it should be like this

jscript_namehere.js

if missing jscript_ at the beginning , zc wont load the script.

I called it jscript_bannerfade.js

your script seems to need prototype frame work. did you add that to your site as well ??

erm... whats "prototype frame work" and how do I install it? lol!

[tony_sar]

the reason i said prototype frame work , because i see function calls to prototype with in your code ..
im not sure if needed but you can look at the original site that made that script and see if there is a mention of prototype .

there are several javascript frame works out there prototype is being one , new javascript goodies use those frame work to do nice things

here is the link to prototype framework ..

http://www.prototypejs.org/