jQuery Plugin For Image Banner with Swapping Description - divSwappingBanner

divSwappingBanner is a super tiny jQuery plugin that creates a swapping div container to display the description of an image that you select.

How to use it:

1. Include jQuery library and jQuery divSwappingBanner plugin on the page

<script src="jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="jquery.divSwappingBanner.js" type="text/javascript"></script>

2. The CSS

.divSwappingBannerContentDiv {
border: 1px solid #ccc;
}
.divSwappingBannerImage {
border: 1px solid #ccc;
}

3. Markup the html

<link rel="stylesheet" type="text/css" href="divSwappingBannerStyle.css">
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-1'>
<p>Test div 1 content</p>
</div>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-2'>
<p>Test div 2 content</p>
</div>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-3'>
<p>Test div 3 content</p>
</div>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-4'>
<p>Test div 4 content</p>
</div>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-5'>
<p>Test div 5 content</p>
</div>

4. Call the plugin

<script>
$(document).ready( function() {
 $().divSwappingBanner({
image_height:"40px"
});
});
</script>

Change LOG:

v1.1.0 (2013-06-30)

• Added auto scroll feature that allows it to select each image one by one automatically. 
• Added new options to turn auto scroll on and set the interval time.

---

This awesome jQuery plugin is developed by antony492. For more Advanced Usages, please check the demo page or visit the official website.