PDA

View Full Version : Step Carousel problem with onpanelclick function



berrigan
07-04-2011, 05:27 AM
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
07-04-2011, 06:06 AM
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
07-04-2011, 06:24 AM
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
07-04-2011, 06:48 AM
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"