insert a javascript for a slideshow in header

[supersnow]

Hi there I hope someone can help with some code. I found a great slide show that I have included in my zen cart (version 1.3.7) template's header. It works great except on secure pages (we use a shared ssl).

two requests:

1. how do I have it as a external javascript - at the moment I have the full script in the header, but I know that this is not the best for search engines.

2. It calls for images and at the moment I have the the code as such:

fadeimages[0]=["http://www.kravshop.com/includes/templates/krav/images/ban-book.jpg","http://www.kravshop.com/index.php?main_page=product_info&cPath=68&products_id=182", "_self"] 
fadeimages[1]=["http://www.kravshop.com/includes/templates/krav/images/ban-training-men.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[2]=["http://www.kravshop.com/includes/templates/krav/images/ban-girl-lifestyle.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_81", "_self"] 
fadeimages[3]=["http://www.kravshop.com/includes/templates/krav/images/ban-casual-women.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[4]=["http://www.kravshop.com/includes/templates/krav/images/ban-big-shirts.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_80", "_self"]
fadeimages[5]=["http://www.kravshop.com/includes/templates/krav/images/ban-casual-men.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[6]=["http://www.kravshop.com/includes/templates/krav/images/ban-boy-lifestyle.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"] 
fadeimages[7]=["http://www.kravshop.com/includes/templates/krav/images/ban-training-women.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_78", "_self"]

I would like it to call for the images so when someone in on the secure side of the website i.e. login or checkout they do not get insecure error messages.

If any one can help I would be very grateful

[supersnow]

Hi there I hope someone can help with some code. I found a great slide show that I have included in my zen cart (version 1.3.7) template's header. It works great except on secure pages (we use a shared ssl).

two requests:

1. how do I have it as a external javascript - at the moment I have the full script in the header, but I know that this is not the best for search engines.

2. It calls for images and at the moment I have the the code as such:

fadeimages[0]=["http://www.kravshop.com/includes/templates/krav/images/ban-book.jpg","http://www.kravshop.com/index.php?main_page=product_info&cPath=68&products_id=182", "_self"] 
fadeimages[1]=["http://www.kravshop.com/includes/templates/krav/images/ban-training-men.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[2]=["http://www.kravshop.com/includes/templates/krav/images/ban-girl-lifestyle.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_81", "_self"] 
fadeimages[3]=["http://www.kravshop.com/includes/templates/krav/images/ban-casual-women.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[4]=["http://www.kravshop.com/includes/templates/krav/images/ban-big-shirts.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_80", "_self"]
fadeimages[5]=["http://www.kravshop.com/includes/templates/krav/images/ban-casual-men.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[6]=["http://www.kravshop.com/includes/templates/krav/images/ban-boy-lifestyle.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=67_75", "_self"] 
fadeimages[7]=["http://www.kravshop.com/includes/templates/krav/images/ban-training-women.jpg", "http://www.kravshop.com/index.php?main_page=index&cPath=66_78", "_self"]

I would like it to call for the images so when someone in on the secure side of the website i.e. login or checkout they do not get insecure error messages.

If any one can help I would be very grateful

So I have found a solution for 2. of my question. For anyone interested this is the code I used:

fadeimages[0]=["<?php echo '' .DIR_WS_TEMPLATE.'' ?>images/ban-book.jpg","<?php echo '' . DIR_WS_CATALOG .'' ?>/index.php?main_page=product_info&cPath=68&products_id=182", "_self"]
fadeimages[1]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-training-men.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[2]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-girl-lifestyle.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>/index.php?main_page=index&cPath=66_81", "_self"] 
fadeimages[3]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-casual-women.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[4]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-big-shirts.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>index.php?main_page=index&cPath=67_80", "_self"]
fadeimages[5]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-casual-men.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>/index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[6]=["<?php echo '' . DIR_WS_TEMPLATE .'' ?>images/ban-training-women.jpg", "<?php echo '' . DIR_WS_CATALOG .'' ?>/index.php?main_page=index&cPath=66_78", "_self"]

For the 1. which I would like to have the script external I am having a bit of a problem. I tried:

<script src="<?php echo '' .DIR_WS_TEMPLATE.'' ?>jscript/headerbanner.js"></script>

To call the javascript and insterted the entire javascript in the external file headerbanner.js

But it doesn't seem to call it properly. It just shows the area for the slideshow as a blank space.

I really would love to have this out of the header. Thanks.


If anyone is interested in the entire java script I can post - the original work is done by Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com).

[ThePatch]

Please don't think I know what I'm talking about . . .

First off, thanks for your question as you gave me an idea for a site I'm currently working on.

Second, while I'm no expert on Java or PHP for that matter, I do know that the install has a java script folder; I use the Zen light box for my image pop-ups; when I install it I have to drop some files in the javascript folder;


While I'm sure it does not, I hope it helps

[supersnow]

Please don't think I know what I'm talking about . . .

First off, thanks for your question as you gave me an idea for a site I'm currently working on.

Second, while I'm no expert on Java or PHP for that matter, I do know that the install has a java script folder; I use the Zen light box for my image pop-ups; when I install it I have to drop some files in the javascript folder;


While I'm sure it does not, I hope it helps

That was the place I was thinking of too! I noticed that there is a jscript folder in the templates folder. But my issue is how to "call" for it in the php file. I just need to know this code i.e what would normally be in the <header> and also what to put in regarding to the code at the instertion point on the page.

Any ideas?

[supersnow]

Just thought I would let everyone know that i solved my problem. Also below is how I did it. I works on my secure pages and I don't have a big jscript in my header to confuse the search engines. It is very simple and I can't believe I didn't work it out sooner. So here is how I finally worked out how to do it --

1. If anyone is interested in the actual code I used for the slide show here it is:

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © 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
//this is the actual images to fade and the target pages on click 
fadeimages[0]=["includes/templates/krav/images/ban-book.jpg","index.php?main_page=index&cPath=68", "_self"]
fadeimages[1]=["includes/templates/krav/images/ban-training-men.jpg", "index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[2]=["includes/templates/krav/images/ban-girl-lifestyle.jpg", "index.php?main_page=index&cPath=66_81", "_self"] 
fadeimages[3]=["includes/templates/krav/images/ban-casual-women.jpg", "index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[4]=["includes/templates/krav/images/ban-big-shirts.jpg", "index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[5]=["includes/templates/krav/images/ban-casual-men.jpg", "index.php?main_page=index&cPath=67_80", "_self"]
fadeimages[6]=["includes/templates/krav/images/ban-training-women.jpg", "index.php?main_page=index&cPath=66_78", "_self"]
fadeimages[7]=["includes/templates/krav/images/ban-boy-lifestyle.jpg", "index.php?main_page=index&cPath=67_80", "_self"]
fadeimages[8]=["includes/templates/krav/images/ban-blueguns.jpg", "index.php?main_page=index&cPath=87", "_self"]
 
//var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
//fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
//fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
//fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
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);-moz-opacity:10;-khtml-opacity:10;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);-moz-opacity:10;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{
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=obj.degree/100
}
 
 
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()
}

2. Insert the javascript into a separate .js file of course with out the <script> tags.
3. Name the file jscript_YOURJAVASCRIPT.js into includes/templates/YOURTEMPLATE/jscript/


If you want to see the end result: http://www.kravshop.com

All credit goes to dynamic drive for the great slide show code I just had to work out how to insert it into my header. Boy did I learn alot about how zencart works with jscripts.

Hope this helps!

[Sweet ZouZou]

I decided to add this mod and check it out on my site. I would like the slideshow on the main page only. I copied the above script into a file called "jscript_slideshow.js" and changed the first few lines as follows.

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
//this is the actual images to fade and the target pages on click
fadeimages[0]=["images/Sweet%20ZouZou/assorted01.jpg","index.php?main_page=index&cPath=68", "_self"]
fadeimages[1]=["images/Sweet%20ZouZou/coconut01.jpg", "index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[2]=["images/Sweet%20ZouZou/dipped01.jpg", "index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[3]=["images/Sweet%20ZouZou/original01.jpg", "index.php?main_page=index&cPath=66_81", "_self"]
fadeimages[4]=["images/Sweet%20ZouZou/pecan01.jpg", "index.php?main_page=index&cPath=67_75", "_self"]
fadeimages[5]=["images/Sweet%20ZouZou/striped01.jpg", "index.php?main_page=index&cPath=67_80", "_self"]

I then placed the .js file in the "catalog/includes/modules/pages/index" folder. When I check the "page source" it shows the script is called, but I get a blank page. What am I doing wrong? (I read the instructions in the /doc folder and the wiki, both were helpful, but I obviously missed something)

www.sweetzouzou.com

Thx Sweet

[shellton]

cane some one help me out to insert a javascript for a slideshow in the zencart logo section as I want to put there my every changing logo excample pictures from our factory

Thank in advanse please see our site
www.shellton-naturestone.com

FOR EXAMPLE: this site has a slide show in his header
http://www.kravshop.com/
but we want to put it in the LOGO SECTION

HOW i CAN DOE THIS????????????????????

[shellton]

cane some one help me out to insert a javascript for a slideshow in the zencart logo section as I want to put there my every changing logo excample pictures from our factory

Thank in advanse please see our site
www.shellton-naturestone.com

FOR EXAMPLE: this site has a slide show in his header
http://www.kravshop.com/
but we want to put it in the LOGO SECTION

HOW i CAN DOE THIS????????????????????

cane some one help me out

I WANT to insert a javascript for a slideshow in the zencart LOGO SECTION as I want to put there my logo pictures from our factory

Thank in advanse please see our site
www.shellton-naturestone.com

FOR EXAMPLE: this site has a slide show in his header http://www.kravshop.com/

but we want to put it in the TOP OF THE LOGO SECTION

HOW i CAN DOE THIS????????????????????
CAN ANY ONE EXPLAINE

[DivaVocals]

cane some one help me out

I WANT to insert a javascript for a slideshow in the zencart LOGO SECTION as I want to put there my logo pictures from our factory

Thank in advanse please see our site
www.shellton-naturestone.com

FOR EXAMPLE: this site has a slide show in his header http://www.kravshop.com/

but we want to put it in the TOP OF THE LOGO SECTION

HOW i CAN DOE THIS????????????????????
CAN ANY ONE EXPLAINE

Did you read through this thread?? It's explained pretty well.. Since the logo is in the header section, and the site you gave as an example is the one who explains how he did this in this thread.. A little fenegaling, and you can replace the logo with the slideshow..

[supersnow]

I had a quick look at your site and your logo is in a div tag with the id "logo". So go to your tpl_header.php and look for this tag. Add the require code as I have explained earlier in this topic in this div tag area.

If you have any problems why not include the tpl_header.php code on this thread so we can all see and maybe help out.