Adding StepCarousels dynamically to the DOM

[glidej]

1) Script Title: Step Carousel Viewer v1.6.1

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

3) Describe problem:

Hello,

I was unable to find someone with a similar problem on the forum, I apologize if this has been handled before.

I'm working on a project where I have to pop carousels into the DOM dynamically. A carousel is one part of a widget the user will be able to add, and I need to initialize the javascript for the carousel. I have already setup code to create a unique id for the gallery.

I setup a wrapper function around the init code, and passed the galleryId to it, without any luck.

ex:


function insertGallery(galleryId) {
stepcarousel.setup({
galleryid: galleryId,
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:false},
panelbehavior: {speed:750, wraparound:false, persist:false},
defaultbuttons: {enable: false},
contenttype: ['inline']
})
}


Try to imagine my horror when I execute this function and the entire webpage goes blank. I'm not really sure where to go from here, any ideas would be very helpful.

thanks,
Jacob

[ddadmin]

One important question- is the HTML markup of the Carousel viewer already present on the page, and all you're trying to do is initialize the Carousel on demand? The HTML markup would be for example this portion:


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

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>