PDA

View Full Version : Step Carousel Viewer - resetting and repopulating (not external file)



freeseus
02-27-2012, 10:22 PM
1) Step Carousel Viewer

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

3) How can I prevent the carousel from setting up until I am ready for it and how can I re-set it up when I need to?

I am dynamically creating and populating div tags that contain pictures and text to go inside the carousel. However, the the stepcarousel.setup is executing before the <div class="panel"> divs are created. I need to delay the setup until all of the divs are created.

I also need to repopulate / reset the carousel on the click of a button. All of the <div class="panel"> divs are inside the "belt" div class.

ddadmin
02-28-2012, 05:43 AM
To initialize the carousel on demand (instead of automatically when the page loads), what you can do is simply wrap the entire initialization code in a function, and call the later when you're ready. For example:


function startcarousel(){
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:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.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']
})
}

Then, when your page is ready for the carousel to be initialized, you'd call function startcarousel().


I also need to repopulate / reset the carousel on the click of a button. All of the <div class="panel"> divs are inside the "belt" div class.

We'd need to know more about how you intend to repopulate the carousel- how is the new content being imported and made available to the rest of the page? Note that if you specify the Carousel to draw its contents from an external .htm file and fetched via Ajax, you can refresh its contents easily by calling the function:


stepcarousel.loadcontent('galleryid', 'path_to_file')

See "Updating a Carousel with external Ajax content on demand" on the supplementary page (http://www.dynamicdrive.com/dynamicindex4/stepcarousel_suppliment5.htm) for more info.