Step Carousel problem with onpanelclick function

[berrigan]

Step Carousel Viewer v1.9

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

I would like to make the Step Carousel viewer more intuitive by making it possible to click on the image to advance the carousel. I am having problems with implementing the onpanelclick:function. I am not sure if I have the syntax correct, but as far as I can tell and in every iteration I have tried, I should at least have the punctuation in all the proper places. What is strange is that when I put the onpanelclick section within the stepcarousel.setup, it throws the whole appearance of the page out of whack. The pagination doesn't work, and all of the divs are visible, cascading down the page. When I separate the onpanelclick section into its own <script> tags, the appearance is fine, but clicking on the image to advance still does not work.


<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:false, moveby:1, pause:3000},
panelbehavior: {speed:400, wraparound:false, persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/left.gif', -5, 80], rightnav: ['images/right.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'],
onpanelclick:function(target){
if (target.tagName=="IMG") {
stepcarousel.stepBy('mygallery', 1);
}
}

})
</script>

You can see how I am using this script at http://membrana.us/selections.html

Thanks in advance for your help.

[Nile]

You're missing a comma after contenttype.

This should do it.


<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:false, moveby:1, pause:3000},
panelbehavior: {speed:400, wraparound:false, persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/left.gif', -5, 80], rightnav: ['images/right.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'],
onpanelclick:function(target){
stepcarousel.stepBy('mygallery', 1);
}
});
</script>

Putting the onpanelclick in it's own <script> tag will do absolutely nothing, hence why it's not doing anything.

[berrigan]

Gosh. I think I stared right through it. Upon such careful examination, I missed the most obvious. Thanks for so kindly pointing it out! It does indeed work now.

[Nile]

No problem, I'm glad to help :D

In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"