jQuery Plugin For Image Banner with Swapping Description - divSwappingBanner

jQuery Plugin For Image Banner with Swapping Description - divSwappingBanner
File Size: 37.5KB
Views Total: 989
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.