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:
Code:
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
Re: insert a javascript for a slideshow in header
Quote:
Originally Posted by
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:
Code:
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:
Code:
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:
Code:
<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).
Re: insert a javascript for a slideshow in header
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
Re: insert a javascript for a slideshow in header
Quote:
Originally Posted by
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?
Re: insert a javascript for a slideshow in header - SOLVED
: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:
Code:
/***********************************************
* 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!
Re: insert a javascript for a slideshow in header
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
Re: insert a javascript for a slideshow in header
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/showth...ascript&page=2
Now I need to figure out how to add links to each picture.
Sweet
Re: insert a javascript for a slideshow in header
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?
Re: insert a javascript for a slideshow in header
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
Re: insert a javascript for a slideshow in header
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.
Code:
<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.
Quote:
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