• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Script Index Page Two ways to set panel widths Status Variables- "status1", "status2", and "status3" Enabling Pagination images for a Carousel" oninit(), onslide() and onpanelclick() event handlers Populating a Carousel using Ajax content (initially or on demand) Integrating an Image Viewer such as Facebox with Carousel Viewer

Enabling pagination images for a Carousel

You can easily enable pagination images be shown for any Carousel on your page, which lets users visually see which panel they're currently at and go to a specific panel. Simply define a DIV anywhere on the page with the ID attribute "galleryid-paginate", replacing "galleryid" is the ID of your Carousel in question. The DIV should then contain a single image, which the script will use as the template to generate additional images accordingly. Here's an example:

<div id="gallerya" class="stepcarousel" style="width: 540px">
<div class="belt">

<div class="panel">
<img src="fruits.jpg" /><br />
</div>

<div class="panel">
<img src="cave.jpg" />
</div>

<div class="panel">
<img src="pool.jpg" />
</div>

<div class="panel">
<img src="autumn.jpg" />
</div>

<div class="panel">
<img src="dog.jpg" />
</div>

</div>
</div>

<p id="gallerya-paginate" style="width: 540px; text-align:center">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
</p>

Inside your designated pagination DIV, define a single image tag with the following 4 attributes:

• src: The src to the pagination image in its default state.
• data-over: The path or full URL to the pagination image when the mouse rolls over it.
• data-select: The path or full URL to the pagination image when it's selected (based on the panel currently in view).
• data-moveby: An integer setting how many panels each pagination image should move the Carousel by. If you want a link generated for each panel, set it to 1, or 2 for example if two panels are visible at once on the page and you wish to reduce the number of links generated.

Table Of Contents

• Script Index Page
• Two ways to set panel widths
• Status Variables- "status1", "status2", and "status3"
• Enabling pagination images for a Carousel v1.8
• oninit(), onslide() and onpanelclick() event handlers
• Populating a Carousel using Ajax content (initially or on demand) v1.8
• Integrating an Image Viewer such as Facebox with Carousel Viewer