Step Carousel Viewer, using ajax

[Irishjugg]

1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:
I'm just wondering what I actually need to use to use the carousel script with ajax to load external pages. My goal is to use the script as a sort of... combination between the ajaxtabs script and using a sliding panel feature as well. I have several links that would load either one of 2 carousel pages, one for left side and one for the right. Each link would load a different page (which may be a major problem with this approach). How would I work with this script and ajax.

Secondly, is there a better way to use the ajaxtabs script in conjunction with a sliding panel script?
I tried to use the sliding panel functionality from http://blog.paranoidferret.com/index.php/2007/09/20/javascript-tutorial-generic-animation-v20/
However the interaction causes large problems, instead of sliding for 2 seconds the script just waits two seconds.

Basically, any ideas on how I can make ajax tabs work with a sliding motion between tabs?

[ddadmin]

Combining these two scripts won't be easy if you're talking about a merging of the two scripts' functionalities into one script. Step Carousel Viewer does support external content actually via Ajax though the difference is that all the external contents are added inside one external file (instead of separate ones). Something like:



<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
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external', 'external.htm'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>

HTML:


<div id="mygallery" class="stepcarousel">
<div class="belt">

//All panel DIVs removed!

</div>
</div>

Source for "external.htm":


<div class="panel">
Panel 1 content here...
</div>

<div class="panel">
Panel 2 content here...
</div>

<div class="panel">
Panel 3 content here...
</div>