PDA

View Full Version : Adding StepCarousels dynamically to the DOM



glidej
07-30-2009, 06:33 PM
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
07-31-2009, 08:24 PM
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>