Sunday, November 27, 2011

jquery cycle plugin

jquery cycle plugin is the best plugin for slide show. Its very lightweight and very easy to configure.
First we need jQuery Library and cyble plugin. Either you download them or include them using following scripts.
Example:
Specify the effect name by either passing a string to the cycle
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $('.slideshow').cycle({  
  4.       fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...  
  5.     });  
  6. });  
  7. script>  
  8. <div class="slideshow">  
  9.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" height="200" width="200">  
  10.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" height="200" width="200">  
  11.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" height="200" width="200">  
  12.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" height="200" width="200">  
  13.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" height="200" width="200">  
  14.     div> 

No comments: