Jquery Multiple Effect Slide Show Plugin
by admin on Aug.19, 2010, under HTML, jQuery
| Download Plugin | View all sample |
This plugin is designed for rapid development. This is a very quick and easy to implement of slideshow/Rotator dynamically. You can add image or even text content into the rotation with less coding. You can change the effect you want. It supports fading, slideLeft, slideTop effects. You can adjust also the speed of rotation. You don’t need to use CSS, but if you know CSS, much better.
Here’s a very simple implementation of this plugin.
First you have to declare the library and plugin source within <head/> tag.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="rotatorSlideShow/OITS_dynamicRotator.js"></script>
Then initialize the plugin within <head/> tag
<script type="text/javascript">
$(document).ready(function() {
$("#slideShow1").dynamicRotator({width:600, height:200});
});
</script>
Where slideShow1 is the id on your <div/> element or Slide Show/Rotator container.
Here’s the extended options for this plugin:
- width - The width of your slideshow container default is 100.
- height - The height of your slideshow container default is 100.
- interval - The speed of the rotation, default is 1000.
- transition - The transistion effect of the rotation. Supports (fading, slideLeft, slideTop). Default is fading effect.
The above options can be optional.
Here’s the html for <body/> tag
<div id="slideShow1">
<div><img src="rotatorSlideShow/images/img1.jpg" /></div>
<div><img src="rotatorSlideShow/images/img2.jpg" /></div>
<div><img src="rotatorSlideShow/images/img3.jpg" /></div>
<div><img src="rotatorSlideShow/images/img4.jpg" /></div>
<div><img src="rotatorSlideShow/images/img5.jpg" /></div>
</div>
Here’s the complete source code looks like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Multi Effect Slideshow</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rotatorSlideShow/OITS_dynamicRotator.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slideShow1").dynamicRotator({width:550, height:200});
});
</script>
</head>
<body>
<div id="slideShow1">
<div><img src="rotatorSlideShow/images/img1.jpg" /></div>
<div><img src="rotatorSlideShow/images/img2.jpg" /></div>
<div><img src="rotatorSlideShow/images/img3.jpg" /></div>
<div><img src="rotatorSlideShow/images/img4.jpg" /></div>
<div><img src="rotatorSlideShow/images/img5.jpg" /></div>
</div>
</body
</html>
| Download Plugin | View all sample |