Step Carousel not rotating images

[stephenconnolly]

1) Script Title: Step Carousel Viewer v1.9

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

3) Describe problem: My images are not rotating as expected, they are just stacking one on top of the other and scroll bars appearing. Any ideas whats going on ? No errors when I check in firebug.

I have uploaded the code to scweb.ie.

[azoomer]

If you post a link to the page you are working on we may be able to help !

[stephenconnolly]

I have uploaded the code to scweb.ie.

[azoomer]

The first problem is the link to the stecarousel.js.
http://scweb.ie/wp-content/themes/wo...tepcarousel.js
It leads to an error page so you need to make sure the script is there.

Also the initiation of the stepcarousel is within the same tags and that doesn't seem to work so you'd better set it up like this ( from the demo page).

<!--Make sure page contains valid doctype at the very top!-->

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

<script type="text/javascript" src="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>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<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:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>

As opposed to this ( from your page)

<script type="text/javascript" src="http://scweb.ie/wp-content/themes/workspacer/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
		 ***********************************************/
		 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:1, pause:3000},
				panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
				defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
				statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
				contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
			})
	</script>
	
	<style type="text/css">

		.stepcarousel{
		position: relative; /*leave this value alone*/
		border: 10px solid black;
		overflow: scroll; /*leave this value alone*/
		width: 270px; /*Width of Carousel Viewer itself*/
		height: 200px; /*Height should enough to fit largest content's height*/
		}
		
		.stepcarousel .belt{
		position: absolute; /*leave this value alone*/
		left: 0;
		top: 0;
		}
		
		.stepcarousel .panel{
		float: left; /*leave this value alone*/
		overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
		margin: 10px; /*margin around each panel*/
		width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
		}

	</style>

Finally there is a javascript error coming from the scripts.js
You can change it to

jQuery(function($) {

	$("#myController").jFlow({
		slides: "#featured .thumb .b",
		width: "502px",
		height: "300px",
		duration: 400
	});

});

and the error goes away.

[stephenconnolly]

That's great azoomer, all working now.

For the benefit of other people, I think the problem was the way I had the initiation pasted within the same tags.