Page 1 of 3 123 LastLast
Results 1 to 10 of 23
  1. #1
    Join Date
    Apr 2007
    Location
    California, USA
    Posts
    233
    Plugin Contributions
    0

    red flag 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

  2. #2
    Join Date
    Apr 2007
    Location
    California, USA
    Posts
    233
    Plugin Contributions
    0

    red flag Re: insert a javascript for a slideshow in header

    Quote Originally Posted by supersnow View Post
    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).

  3. #3
    Join Date
    Sep 2006
    Posts
    281
    Plugin Contributions
    0

    Default 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
    [FONT="Georgia"]Samuel Turnmire[/FONT]
    [FONT="Century Gothic"]co-Founder[/FONT]
    [FONT="Book Antiqua"]geekFoundry[/FONT]

  4. #4
    Join Date
    Apr 2007
    Location
    California, USA
    Posts
    233
    Plugin Contributions
    0

    Idea or Suggestion Re: insert a javascript for a slideshow in header

    Quote Originally Posted by ThePatch View Post
    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?

  5. #5
    Join Date
    Apr 2007
    Location
    California, USA
    Posts
    233
    Plugin Contributions
    0

    Default Re: insert a javascript for a slideshow in header - SOLVED


    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!

  6. #6
    Join Date
    Nov 2007
    Posts
    141
    Plugin Contributions
    0

    Default 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

  7. #7
    Join Date
    Nov 2007
    Posts
    141
    Plugin Contributions
    0

    Default 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

  8. #8
    Join Date
    Sep 2005
    Posts
    57
    Plugin Contributions
    0

    Default 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?

  9. #9
    Join Date
    Nov 2007
    Posts
    141
    Plugin Contributions
    0

    Default 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

  10. #10
    Join Date
    Apr 2007
    Location
    California, USA
    Posts
    233
    Plugin Contributions
    0

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

    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
    Thanks
    Supersnow

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. Adding slideshow javascript crashes my mobile menu
    By bushpilot444 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 5 May 2016, 01:53 PM
  2. v151 Javascript slideshow help
    By bpoilspill in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 7 Mar 2013, 03:00 AM
  3. Javascript slideshow issue
    By timhersh in forum General Questions
    Replies: 6
    Last Post: 2 Nov 2012, 09:26 PM
  4. Javascript slideshow works in Firefox but not IE!!
    By arniesbarmyarmy in forum General Questions
    Replies: 7
    Last Post: 17 Nov 2009, 05:37 AM
  5. how to insert a slideshow in flash on home page?
    By giuly in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 4 Nov 2009, 03:09 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR