Populating a Carousel using Ajax content (initially or on demand)

Step Carousel lets you define the contents for it (the panels themselves) inside an external file on your server, instead of directly inline on the page. This way when you update the external file, all carousels on your site that reference this file gets updated automatically. There are two ways to specify Ajax content for a Carousel- 1) from the start when it first loads on the page, or 2) for a Carousel already loaded on the page, on demand when an action is called.

Using an external file as the default contents of a Carousel

You can specify that a Carousel gets its panel contents from an external file by default when it loads on the page. Firstly, inside your initialization code in the HEAD section of your page, set the contenttype to "ajax" and pointing to the external file containing your panels:

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:300, wraparound:false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
contenttype: ['ajax', 'external2.htm'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

where "external2.htm" should be a blank page containing just the HTML of your Carousel panels themselves (ie: <div class="panel"></div> elements). For example:

"external2.htm":

<div class="panel" style="width: 150px; background:darkred">
1
</div>

<div class="panel" style="width: 100px; background:darkred">
2
</div>

<div class="panel" style="width: 50px; background:darkred">
3
</div>

<div class="panel" style="width: 200px; background:darkred">
4
</div>

<div class="panel" style="width: 130px; background:darkred">
5
</div>

Since your Step Carousel is now getting its contents from this external file, the markup for it on your script page should now be devoid of the panels' HTML:

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

//All panel DIVs removed!

</div>
</div>

Updating a Carousel with external Ajax content on demand

You can also dynamically update the contents of any Carousel after it's loaded on the page with new content from an external file. Simply call the public method stepcarousel.loadcontent() with the 2 required parameters anywhere on your page:

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

Where "galleryid" is the ID of the Carousel you wish to modify, and "path_to_file" is the path to the external file on your server containing the new panel contents.

For example, the below link when clicked on will update the Carousel with ID "mygallery" with contents defined inside "external2.htm" that's located in the same directory as the Carousel page itself.

1
2
3
4
5
6
7

Load New content into gallery

<a href="javascript:stepcarousel.loadcontent('mygallery', 'external2.htm')">Modify Step Carousel contents</a>

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post