insert a javascript for a slideshow in header

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

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

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

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

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

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?

:clap::jump:
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](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!

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)

https://www.sweetzouzou.com

Thx Sweet

I found this post and followed the instructions which added the script to the page instead of in a separate file and it works.

http://www.zen-cart.com/forum/showthread.php?t=61392&highlight=javascript&page=2

Now I need to figure out how to add links to each picture.

Sweet

Sweet ZouZou, what template are you using on your site? It looks very nice. Is it a modification of one of the download templates? If so, which one?

I started with the niftyzen template (I liked the rounded corner look at first) and started to move some things around some, then added a bunch of mods ;-)

Thanks or the props!

Sweet

Hi there - sorry for taking a while to reply, been so busy with the season.

Anyway the reason I put it in a separate javascript file was to help with search engines. As the java at the top of the page was just so long and I read somewhere that you should have all css and java scripts as a linked files to help the search engine spiders navigating your site better.

Anyway the external javascript is just the first bit as you still need to place the actuall location of the script into the page. If you follow my instructions I have in this thread for making it an external javascript you still need to place the code for the slide show in the location on your page.

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 463, 180, 0, 4000, 1, "R")
//new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 
</script>

So with the code above I have the width of the slide show 463 pixels, and height 180 pixels, 0 border, 4000 delay and no pause and random order. You can change this to what you like.

Again I am sorry if my instructions were incomplete but I really started this thread to ask how to take the javascript out to an external file and still be able to have the insterted script in my header know how to function.

Now I need to figure out how to add links to each picture.

You can see at the end of the call to each image there is something like index.php?main_page=index&cPath=68

change this to the page within your site. I didn't put the full url with http:// as it was within my site but if you have an external page then you would need to put the full url with the http://.

Then the last bit on that line it whether the link goes to the same window _self or if you want it to link to a new window _blank

Supersnow,
Thanks for the reply. I understand this is not the best time of the year for zen!

So, I moved the script back to the file called jscript_slideshow.js and copied it to my includes/templates/Sweet ZouZou/jscript folder. Next I added the below code to my includes/language/english/html_includes/Sweet ZouZou/define_main_page.php file. I want the slideshow on my main page only.

But I think there is more to add to the above code? How do I call the new jscript file?

Thx, Sweet

It works now, my mistake. I messed with the code before and forgot to change it back. Thanks for the help Supersnow and happy holidays!

Now I'm trying to center the jscript slideshow.

The best I could do was position the images left:100px

Sweet ZouZou:

Now I'm trying to center the jscript slideshow.

The best I could do was position the images left:100px

To position the slideshow I originally enclosed my script in div id tags that I had set in my css. By using my template css I then was able to play around with it a bit. I now have it in a table so that I can have to zencart driven banners on either side. I hope this helps.

I wrapped the script in a "div id" as well and called it "slideshow"

then added to my css

#slideshow {
margin-left: 60px;
width: 500px;
}

I tried using "float: center" but the script stayed on the left margin, so I had to use "margin-left: 60px"

Sweet

Looks great! I am glad I was able to help, even though I was a little slow.

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
https://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
https://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
https://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

shellton:

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

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.