jqueryexample.com jquery cycle example - jqueryexample.com

jquery cycle example by jqueryexample

jquery cycle

jquery cycle

jquery cycle is the best plugin I have found for images/content slideshow. Its very lightweight, easy to configure and supports many different types of transition effects.

First we need jQuery Library and cycle plugin. Either you download them or include them using following scripts.

JQuery Cycle Plugin – Basic Example 1

  1. <style type=”text/css”>
  2. .slideshow { height: 232px; width: 232px; margin: auto }
  3. .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
  4. </style>
  5. <!– include jQuery library –>
  6. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
  7. <!– include Cycle plugin –>
  8. <script type=”text/javascript” src=”http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js”></script>
  9. <script type=”text/javascript”>
  10. $(document).ready(function() {
  11.     $(‘.slideshow’).cycle({
  12.       fx: ‘fade’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
  13.     });
  14. });
  15. </script>
  16. <div class=”slideshow”>
  17.     <img src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” height=”200″ width=”200″>
  18.     <img src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg” height=”200″ width=”200″>
  19.     <img src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg” height=”200″ width=”200″>
  20.     <img src=”http://cloud.github.com/downloads/malsup/cycle/beach4.jpg” height=”200″ width=”200″>
  21.     <img src=”http://cloud.github.com/downloads/malsup/cycle/beach5.jpg” height=”200″ width=”200″>
  22.     </div>

JQuery Cycle Plugin – Basic Example 2
All the examples mentioned bellow using following HTML code and CSS style.

HTML Code as follows

  1. <div id=”slide1″ class=”pics”>
  2.     <img src=”images/beach1.jpg” height=”200″ width=”200″>
  3.     <img src=”images/beach2.jpg” height=”200″ width=”200″>
  4.     <img src=”images/beach3.jpg” height=”200″ width=”200″>
  5. </div>

CSS Style used as follows

  1.  /* width and height css style for Images */
  2. .pics {
  3.     height:  232px;
  4.     width:   232px;
  5.     padding: 0;
  6.     margin:  0;
  7. }
  8.  /* css style added for slider Images */
  9. .pics img {
  10.     padding: 15px;
  11.     border:  1px solid #ccc;
  12.     background-color: #eee;
  13.     width:  200px;
  14.     height: 200px;
  15.     top:  0;
  16.     left: 0
  17. }

Now lets see what all different type of Effect you can Choose and apply.

  1. * blindX
  2. * blindY
  3. * blindZ
  4. * cover
  5. * curtainX
  6. * curtainY
  7. * fade
  8. * fadeZoom
  9. * growX
  10. * growY
  11. * scrollUp
  12. * scrollDown
  13. * scrollLeft
  14. * scrollRight
  15. * scrollHorz
  16. * scrollVert
  17. * shuffle
  18. * slideX
  19. * slideY
  20. * toss
  21. * turnUp
  22. * turnDown
  23. * turnLeft
  24. * turnRight
  25. * uncover
  26. * wipe
  27. * zoom

There are two ways we can apply the effect to the cycle method.
Method 1: Specify the effect name by either passing a string to the cycle

  1. $(‘#slide1’).cycle(‘fade’);

Method 2: Using an options object and setting the fx property to the name of the desired effect.

  1.  $(‘#slide1’).cycle({
  2.     fx: ‘scrollDown’
  3. });

Now lets move to little advance on how to choose Speed and Timeout Values. You can see the speed and timeout variable set in following example.

Speed : defines the number of milliseconds it will take to transition from one slide to the next.
Timeout: specifies how many milliseconds will elapse between the start of each transition.

  1. $(‘#slide1’).cycle({
  2.     fx:      ‘scrollDown’,
  3.     speed:    300,
  4.     timeout:  2000
  5. });

Let me know if you want me to write more examples for you.

For demo Visit

Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment