insert a javascript for a slideshow in header

[Sweet ZouZou]

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

[supersnow]

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

[Sweet ZouZou]

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.

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

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

Thx, Sweet

[Sweet ZouZou]

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!

[Sweet ZouZou]

Now I'm trying to center the jscript slideshow.

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

[supersnow]

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.

[Sweet ZouZou]

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

<div id="slideshow">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 500, 360, 0, 2000, 1, "R")
//new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
</script>
</div>

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