Adding Javascript to the frontpage

minfinger · #1 02-15-2011, 08:52 PM

So I found this image slideshow and it works well with what my client wants.
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I've got it running in a stand alone HTML file, but when I started adding it to the welcome.tpl things went wrong. The Category.tpl displays and so does my Facebook Like button, but the slide show is a no show

Anyway here's the basis of the code in the HTML file.

This portion is supposed to go above the </head> which I placed in my service_head.tpl file.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">


var mygallery1=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],
        ["images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],
        ["images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],
        ["images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],
        ["images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],
        ["images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],
        ["images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],
        ["images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]
         //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},
    persist: true, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: ""
})

</script>

This is the portion of the HTML that displays the slideshow and the other things I want on the welcome page.

Code:

<table width="600" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td rowspan="3">{include file="customer/categories.tpl"}</td>
    <td colspan="2"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
        <fb:like href="http://www.facebook.com/#!/pages/Savannahs-Candy-Kitchen/173098054471" show_faces="false" width="450" float: center></fb:like></td>
  </tr>
  <tr>
    <td><div id="fadeshow1">    </div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

I know I should be using {literal} in a few places, I'm just not sure. And it's late, I'm tired

Thanks,
Mike

Shamun · #2 02-15-2011, 09:24 PM

The googleapis should already be included in meta.tpl or meta_css.tpl. Including multiple jQuery versions will produce silent errors.
Fadeslideshow should be in root skin and referenced in meta.tpl or meta_js.tpl

There </script> after the comments is unneeded, and so is the opening script afterwards. Move the opening script up to above the comments and throw literals in it.

Code:

<script type="text/javascript">
{literal}
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

var mygallery1=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],
        ["images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],
        ["images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],
        ["images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],
        ["images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],
        ["images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],
        ["images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],
        ["images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]
         //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},
    persist: true, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: ""
})
{/literal}
</script>

minfinger · #3 02-17-2011, 08:43 AM

OK wait.

I put this in the skin1\customer\meta.tpl

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="{$SkinDir}/fp_images/fadeslideshow.js"></script>

Is there a way to turn "/demos/xcart/skin1" into {$SkinDir} that's in the javascript?

Code:

{*
+----------------------------------------------------------------------+
Front Page
+----------------------------------------------------------------------+
*}
<script type="text/javascript">
{literal}
var mygallery1=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["/demos/xcart/skin1/fp_images/images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],
        ["/demos/xcart/skin1/fp_images/images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],
        ["/demos/xcart/skin1/fp_images/images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],
        ["/demos/xcart/skin1/fp_images/images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],
        ["/demos/xcart/skin1/fp_images/images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],
        ["/demos/xcart/skin1/fp_images/images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],
        ["/demos/xcart/skin1/fp_images/images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],
        ["/demos/xcart/skin1/fp_images/images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]
         //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},
    persist: true, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: ""
})
{/literal}
</script>
<table width="600" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td rowspan="3">asdfasdfasdf</td>
    <td colspan="2"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
        <fb:like href="http://www.facebook.com/#!/pages/Savannahs-Candy-Kitchen/173098054471" show_faces="false" width="450" float: center></fb:like></td>
  </tr>
  <tr>
    <td><div id="fadeshow1">    </div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Shamun · #4 02-17-2011, 09:10 AM

If /demos/xcart/skin1 is {$SkinDir} and you need to use that in the JS, you can do this:

Code:

<script type="text/javascript">
{literal}
var mygallery1=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
{/literal}
        ["{$SkinDir}/fp_images/images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],
        ["{$SkinDir}/fp_images/images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],
        ["{$SkinDir}/fp_images/images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],
        ["{$SkinDir}/fp_images/images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],
        ["{$SkinDir}/fp_images/images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],
        ["{$SkinDir}/fp_images/images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],
        ["{$SkinDir}/fp_images/images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],
        ["{$SkinDir}/fp_images/images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]
         //<--no trailing comma after very last image element!
    ],
{literal}
    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},
    persist: true, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: ""
})
{/literal}
</script>

minfinger · #5 02-17-2011, 08:30 PM

Great thanks, working perfect!



	X-Cart forums © 2001-2020