Step Carousel Viewer not working on script site

[johnboy]

1) Script Title: Step Carousel Viewer v1.9

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

3) Describe problem:

Hi,
I'm having some trouble using this script on another script, im coding it into the index.tpl file on my site but the javascript doesn't seem to work.

Here is the url for my site: http://www.jamtite.com

As you can see its all displayed but no js working. I've uploaded the js file to the main directory and in the folder where the index.tpl is but still nothing. I've tried typing the full url for the stepcarousel.js file with no luck.

Tested it on a html page on the same address and it works fine eg http://www.jamtite.com/carousel.html

[jscheuer1]

The page is using the jamtite.com/stepcarousel.js file, so that's not a problem.

There could be other problems, but here:

<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: ,
	panelbehavior: ,
	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>

Those are a syntax errors, and the missing information is required. On the working page it has:

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

Now, hopefully this is just a typo. But it could be an unintended consequence of your CMS. If so, you probably need to escape the {} in those two property assignments. I see the ones in defaultbuttons are working OK as are the ones at the beginning and ending of the code. If it's a matter of nested [] brakets doing the trick as happens with those other two, you could try:

<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][0], pause:3000},
	panelbehavior: {speed:[500][0], 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>

That doesn't change the values, they're still 1 and 500 respectively. They just might look different to your CMS. But if you've escaped the other {} and just missed these, escape these and you will be fine without the added [] business.

[johnboy]

Thanks for your help - It's working now

It had to add the brackets [ ] like you said, must be the cms, very good to know for future reference, any idea what causes this?

thanks again!

[jscheuer1]

Yes. In case you don't know, CMS is Content Management System. When you make up a tpl the CMS looks for its special tokens and attempts to replace them and whatever is inside them with some other value defined elsewhere.

Your CMS must be using {} as tokens and in those two cases saw what was inside them as something that could be defined elsewhere, but found no definition, so rendered them as blank. Or it saw something specific inside them that told it to render them as a blank.

The ones that got rendered 'as is' have something inside them that let the CMS know that they couldn't be meant as tokens, at least not as valid ones. I guessed right, it was the [].

However, there's almost sure to be an escape character that could be used instead. In the vast majority of languages it's the down slash (\). So as an experiment you could try:

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

Alternatively you could check your CMS documentation for the use of {}, how it's applied, what it means, and how to override it. Once you have that information (it will probably be mostly what I've guessed, but there will probably be more detail, specifics may vary), you will be able to deal with these sorts of things more effectively and perhaps have a greater understanding of the flexibility of the CMS.