Help with Jquery

[tthenne]

Hey guys,

I was really hoping to implement the Inner Fade Jquery slideshow on one of my categories page. In the tpl_index_categories.php file i'm using a conditional if ($GET['cPath'] == 1){ insert slider html here}

Then I'm taking the js files that I I have for the slideshow and I'm putting them in the includes/module/pages/index/ directory and pre-fixing them with jscript_ so they are being pulled into the header (which works). The only problem is, is that when I pull up my page there is a javascript error that $("#slideshow").innerfade is not a function. But I am calling it in a jscript_innerfade.settings.js file that is also in the includes/module/pages/index/ directory. I have also tried to place this call to the function directly in the html_header.php before the </head> tag. Still no luck, I'm getting a js error and the slideshow pics are showing up but they are just not in a slideshow; rather, they are in a normal <ul>.

I am calling the function on $document.ready but I'm wondering if the other js files are rendering after, therefore causing the error.

Anyone have any thoughts or suggestions on how I can get this baby to work?

[Website Rob]

Hard to give a good answer without being able to see what you see.

Are your paths to jQuery and the Fade Slideshow both correct?
Are you using #slideshow within another jQuery script?

Also, the Fade Slideshow script you mention seems pretty outdated. Suggest you use something more uptodate, and maintained, like jQuery Cycle Lite - which also has a full blown version.

And if you wanted to kick things up a notch you could use s3slider which provides more features than Cycle but is also a bit more complicated to setup.

[tthenne]

Hard to give a good answer without being able to see what you see.

Are your paths to jQuery and the Fade Slideshow both correct?

^Yes I believe so, I have the jQuery library in my includes/templates/custom_template/js/ directory and my Fade Slideshow js files in includes/modules/pages/index/ directory all are rendering in the browser as <script src="*correct pathe*">

Are you using #slideshow within another jQuery script?

^ yes I am calling the $document.ready( function(){$('ul#slideshow').innerfade({....settings}) }) ; in a different js file than the function is defined in. I have linked the innerFade.settings in the header as well and it lives in includes/modules/pages/index/

And if you wanted to kick things up a notch you could use s3slider which provides more features than Cycle but is also a bit more complicated to setup.

^I'm interested in the s3slider I will check it out. Do you have any good tutorials on how to implement this in zen cart?

Thanks

[tthenne]

Does anyone know where you would initialize a javascript function in zen cart for an index.php?main_page=index&cPath=1. Can I make this a separate js file and link it in the head by placing a jscript_initializeFunction.js in the includes/modules/pages/index directory of my zen cart? or is there better practice out there for zen cart to initialize the function in say html_header.php or something of that sort?

TH

[tthenne]

Hey guys so I got the s3Slider working. Seems to be working good so far. However, what I did was I put the jscript files in the includes/modules/pages/index/ directory because I need the files to load in the head when I go to my index.php?main_page=index&cPath=1 in order for the slideshow to work. I only want the slideshow to come up on the categories page so I have put a conditional in the tpl_index_categories.php file in my custom-template directory that says

if ($GET['cPath'] ==1) {

Here is the html for my slider
}

Okay, so everything works great. You can check it out at
http://shop.auroraenterprise.com/ind...=index&cPath=1

but the one itty-bitty problem is that when I go to my home page if you have firebug or any other javascript reader you will notice a little error. Why? because there is no defined html element for the js function to run. Which leads me to the question. How can I only load the particular js files on my index.php?main_page=index&cPath=1 (which is my first category page)? and prevent the script from loading in any other page?

Thanks in advance,

TH

[Website Rob]

This path is correct:
includes/templates/lite_grey/jscript/jscript_jquery-1.5.2.min.js

If you also upload & name any other jQuery files the same, starting with 'jscript_' then they will automatically be loaded as well; no need to edit any Header tags. Also, if no longer using the easySlider script then make sure to remove the script and any reference to it.


To get the Slider working on your Home page and Category 1 pages, you can edit your 'includes/templates/lite_grey/common/tpl_main_page.php' to include the following, just after the Breadcrumb code.

} ?> <!-- eof breadcrumb -->

<?php
if ($current_page_base == 'index' and $cPath == '' or $cPath == '1') {

Here is the html for my slider
}

Read the notes within the 'tpl_main_page.php' at top of page for more info, as that is where I got the above include code.

Make sure though to remove the code from your 'tpl_index_categories.php' file else the s3slider will be loaded twice.