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.

[tthenne]

Also, if no longer using the easySlider script then make sure to remove the script and any reference to it.

^Still using the easySlider on my home page, but using s3Slider on categories page. Why? Idk, for variety purposes I guess and to give a different look (i'm going to replace the pics on my category page those are just placeholders for now).

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.

^I've got the sliders where I want them respectfully, however, the problem lies within the fact that I only want the specific js files to load on certain pages. For instance, I only want the jscript_s3slider.js file to load on the index?main_page=index&cpath=1 page rather than loading on all of the index pages. The jscript_s3slider.js file lives in includes/modules/pages/index/ directory.

Everything else has been working great. Thanks for the s3Slider lookup

[Website Rob]

If you only want to load on Home page then change my above to use:

if ($this_is_home_page) {

[tthenne]

I think I am confusing you.

I have the html loading where I want it. However, my question is how do you specify when to load a <script src=""></script> into the header of the zen cart. I know there is a way to do this somehow by creating a php file in includes/modules/pages/(whatever page you want the js files to load in, in this example it is index)index/special_php_file.php

The reason I'm getting a js error on my homepage is because there is no <div id=slider1>... which is good because I don't want to use that on the home page! I'm using the easySlider on the home page and the s3Slider on the categories page

Is my question more clearly stated?

[Website Rob]

I think a review is in order.

--------------------------------------------------

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.

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
}

--------------------------------------------------

If you only want to load on Home page then change my above to use:

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

<?php
if ($this_is_home_page) {

Here is the html for my slider - or anything else you want on the home page

}

--------------------------------------------------

Not sure why you seem to be stuck on using a more complicated method but the above is easier and will work as desired.