Step Carousel not working: $gallery is undefined

[quethenoo]

1) Script Title: Step Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:

http://www.rcmaroc.com/

I cant get the carousel working on my clients page. When I look in firebug its throwing up this error: "config.$gallery is undefined
[Break On This Error] config.$gallery.unbind()"
Have searched in google and on this forum but I cant seem to get to the bottom of the problem as far as I can tell everything is set up ok. Any help is MUCH appreciated!

cheers chris

[ddadmin]

There may be other issues, but you need to move the initialization code for Step Carousel so it follows the reference to the jQuery library on your page (currently it proceeds):

<script type='text/javascript' src='http://www.rcmaroc.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

<!-- after the above, not before -->

<!--Featured Products Carousel-->
<script type="text/javascript" src="http://www.rcmaroc.com/wp-content/themes/viroshop/includes/js/stepcarousel.js">
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">

			stepcarousel.setup({
			galleryid: 'mygallery', //id of carousel DIV
			beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
			panelclass: 'panel', //class of panel DIVs each holding content
			autostep: {enable:true, moveby:6, pause:1000},
			panelbehavior: {speed:500, wraparound:false, persist:false},
			defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://www.rcmaroc.com/wp-content/themes/viroshop/images/left-arrow.png', -5, 80], rightnav: ['http://www.rcmaroc.com/wp-content/themes/viroshop/images/right-arrow.png', -15, 80]},
			contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>

[quethenoo]

First of all, thanks for taking the time to look at this, really appreciated.

Yeah I see what you mean in the way the order comes out in firebug, which is wierd as in header.php they arent in that order. However I removed the initialising script from the header to the actual page and all seems well.

thanks for the help, chris

[gouramx]

This is the solution:
1) open heather.php
2) Search for: <!--Featured Products Carousel-->
3) After <!--Featured Products Carousel--> paste the next line:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.min.js"></script>
4)The line of the step 3 will be under <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/stepcarousel.js"></script>
Save it and enjoy!!!

[gpeters]

When I added this it did fix my carousel but it added about a 2 inch white space between my header and the carousel....any thoughts on how to get that space removed?
Thanks!

This is the solution:
1) open heather.php
2) Search for: <!--Featured Products Carousel-->
3) After <!--Featured Products Carousel--> paste the next line:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.min.js"></script>
4)The line of the step 3 will be under <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/stepcarousel.js"></script>
Save it and enjoy!!!

[keyboard]

Because you started a new thread on the topic, I'm closing this one now. If anyone needs it re-opened, let me now.