Type of loading


Type of navigation




Updatelog

04/09/2012
- Bug jquery 1.8 fixed: update jquery-color-animation
19/04/2012
- Bug fixed: in IE was jumping two slides to start.
- Bug fixed: conflict between the options progressbar and auto_play.
- New animations: swapBlocks, cut
07/04/2012
- Added with_animations: specific animations.
- Added auto_play: sets whether the slideshow will start automatically.
- Thumbs: improved code.
02/02/2012
- Bug fixed: start slideshow with mouse over
- Bug fixed: animations circles, circlesInside and circlesRotate on Webkit.
- New animations: hideBars, swapBars, swapBarsBack
26/12/2011
- Redesign of the site!
- Added enable navigation keys
18/12/2011
- Added progress bar
- Option does not stop the slideshow go over.
- Modifications to existing animations.
- New animations: cubeShow, upBars, downBars
- Bug fixed: stop slideshow to blur window.
08/12/2011
- Controls: option play/pause manually.
- Focus slideshow
05/11/2011
- New option: preview to go over the points .
- Bug fixed: problem of memory consumption to blur the window with skitter working. Hint of Dan Partac
28/10/2011
- New options: alignment of numbers, dots and thumbs.
08/09/2011
- New animations: circles, circlesInside and circlesRotate
- Callback onLoad: calling a user-defined function to load images
- Added rotate-scale plugin: to the effect of rotation
05/08/2011
- New animations: glassCube, glassBlock
- Bug fixed hideTools
30/05/2011
- Display multiple instances on the same page!
28/05/2011
- New animation: randomSmart
- Change in the animation: random
- New mode: ramdomly sliders. Hint of Team IT0091
- jQueryUI removed and added plugins compatible: jQuery easing and jQuery animate colors
15/05/2011
- Added plugin for Wordpress
09/05/2011
- Control over the width of the label. Hint of Ronny
08/05/2011
- Navigation with dots
- New animation: cubeJelly
- Restructuring HTML plugin
- Bug fixed navigation thumbs
07/05/2011
- Added option to load data via XML.
23/04/2011
- Added fullscreen mode
21/04/2011
- Fixed bug in loading images in IE9
- Update animations: directionTop, directionBottom, directionRight, directionLeft and block
20/04/2011
- Update jQuery and jQuery UI
16/01/2011
- New animations: cubeStopRandom, cubeSpread
04/01/2011
- Update thumbnail browsing. Now the position of the mouse will move the thumbnails
- Fix the problem with the effects: cubeStop, cubeHide, cubSize.
09/10/2010
- Added the type of thumbnail browsing.
04/08/2010
- Creation of Skitter Slideshow!

Next updates:

Option play/pause manually
Progress bar slide actually
Themes

Includes

  1. 

  2. 

  3. // Styles

  4. 

  5. 

  6. <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />

  7. 

  8. 

  9. 

  10. 

  11. 

  12. // Scripts

  13. 

  14. 

  15. <script src="js/jquery-1.5.2.min.js"></script>

  16. 

  17. 

  18. <script src="js/jquery.skitter.min.js"></script>

  19. 

  20. 

  21. <script src="js/jquery.easing.1.3.js"></script>

  22. 

  23. 

  24. <script src="js/jquery.animate-colors-min.js"></script>

  25. 

  26. 

  27. 

  28. 

  29. 

// Styles


<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />





// Scripts


<script src="js/jquery-1.5.2.min.js"></script>


<script src="js/jquery.skitter.min.js"></script>


<script src="js/jquery.easing.1.3.js"></script>


<script src="js/jquery.animate-colors-min.js"></script>

Javascript

  1. 

  2. 

  3. $(function(){

  4. 

  5. 

  6.     $('.box_skitter_large').skitter();

  7. 

  8. 

  9. });

  10. 

  11. 

$(function(){


    $('.box_skitter_large').skitter();


});

HTML

  1. 

  2. 

  3. <div class="box_skitter box_skitter_large">

  4. 

  5. 

  6. 

  7. 

  8. 

  9.     <ul>

  10. 

  11. 

  12.         <li>

  13. 

  14. 

  15.             <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a>

  16. 

  17. 

  18. 

  19. 

  20. 

  21.             <div class="label_text">

  22. 

  23. 

  24.                 <p>Label</p>

  25. 

  26. 

  27.             </div>

  28. 

  29. 

  30.         </li>

  31. 

  32. 

  33.         <li>

  34. 

  35. 

  36. 

  37. 

  38. 

  39.             <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a>

  40. 

  41. 

  42.             <div class="label_text">

  43. 

  44. 

  45.                 <p>Label</p>

  46. 

  47. 

  48. 

  49. 

  50. 

  51.             </div>

  52. 

  53. 

  54.         </li>

  55. 

  56. 

  57.         <li>

  58. 

  59. 

  60.             <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a>

  61. 

  62. 

  63. 

  64. 

  65. 

  66.             <div class="label_text">

  67. 

  68. 

  69.                 <p>Label</p>

  70. 

  71. 

  72.             </div>

  73. 

  74. 

  75.         </li>

  76. 

  77. 

  78.     </ul>

  79. 

  80. 

  81. 

  82. 

  83. 

  84. </div>

  85. 

  86. 

<div class="box_skitter box_skitter_large">





    <ul>


        <li>


            <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a>





            <div class="label_text">


                <p>Label</p>


            </div>


        </li>


        <li>





            <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a>


            <div class="label_text">


                <p>Label</p>





            </div>


        </li>


        <li>


            <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a>





            <div class="label_text">


                <p>Label</p>


            </div>


        </li>


    </ul>





</div>

XML

  1. 

  2. 

  3. <?xml version="1.0" encoding="utf-8"?>

  4. 

  5. 

  6. <skitter>

  7. 

  8. 

  9. 

  10. 

  11. 

  12.     <slide>

  13. 

  14. 

  15.         <link>#directionTop</link>

  16. 

  17. 

  18.         <image type="directionTop">images/001.jpg</image>

  19. 

  20. 

  21.         <label><![CDATA[<p>directionTop</p>]]></label>

  22. 

  23. 

  24. 

  25. 

  26. 

  27.     </slide>

  28. 

  29. 

  30.     <slide>

  31. 

  32. 

  33.         <link>#cubeSize</link>

  34. 

  35. 

  36.         <image type="cubeSize">images/002.jpg</image>

  37. 

  38. 

  39. 

  40. 

  41. 

  42.         <label><![CDATA[<p>cubeSize</p>]]></label>

  43. 

  44. 

  45.     </slide>

  46. 

  47. 

  48.     <slide>

  49. 

  50. 

  51.         <link>#paralell</link>

  52. 

  53. 

  54. 

  55. 

  56. 

  57.         <image type="paralell">images/003.jpg</image>

  58. 

  59. 

  60.         <label><![CDATA[<p>paralell</p>]]></label>

  61. 

  62. 

  63.     </slide>

  64. 

  65. 

  66. 

  67. 

  68. 

  69. </skitter>

  70. 

  71. 

<?xml version="1.0" encoding="utf-8"?>


<skitter>





    <slide>


        <link>#directionTop</link>


        <image type="directionTop">images/001.jpg</image>


        <label><![CDATA[<p>directionTop</p>]]></label>





    </slide>


    <slide>


        <link>#cubeSize</link>


        <image type="cubeSize">images/002.jpg</image>





        <label><![CDATA[<p>cubeSize</p>]]></label>


    </slide>


    <slide>


        <link>#paralell</link>





        <image type="paralell">images/003.jpg</image>


        <label><![CDATA[<p>paralell</p>]]></label>


    </slide>





</skitter>

Extend

Options

option description default example
velocity Velocity of animation 1 $('.box_skitter_large').skitter({velocity: 2});
interval Interval between transitions 2500 $('.box_skitter_large').skitter({interval: 3000});
animation Default animation null or defined in <a> class $('.box_skitter_large').skitter({animation: 'fade'});
numbers Numbers display true $('.box_skitter_large').skitter({numbers: false});
navigation Navigation display true $('.box_skitter_large').skitter({navigation: false});
label Label display true $('.box_skitter_large').skitter({label: false});
easing_default Easing default null $('.box_skitter_large').skitter({easing_default: 'easeOutBack'});
animateNumberOut Animation/style number/dot {backgroundColor:'#333', color:'#fff'} $('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});
animateNumberOver Animation/style hover number/dot {backgroundColor:'#000', color:'#fff'} $('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});
animateNumberActive Animation/style active number/dot {backgroundColor:'#cc3333', color:'#fff'} $('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});
thumbs Navigation with thumbs false $('.box_skitter_large').skitter({thumbs: true});
hideTools Hide numbers and navigation false $('.box_skitter_large').skitter({hideTools: true});
fullscreen Fullscreen mode false $('.box_skitter_large').skitter({fullscreen: true});
xml Loading data from XML file false $('.box_skitter_large').skitter({xml: "xml/slides.xml"});
dots Navigation with dots false $('.box_skitter_large').skitter({dots: true});
width_label Width label null $('.box_skitter_large').skitter({width_label: '300px'});
show_randomly Randomly sliders false $('.box_skitter_large').skitter({show_randomly: true});
onLoad Callback null $('.box_skitter_large').skitter({onLoad: function() { console.log('start!') } });
numbers_align Alignment of numbers/dots/thumbs left $('.box_skitter_large').skitter({numbers_align: 'center'});
preview Preview with dots false $('.box_skitter_large').skitter({dots: true, preview: true});
focus Focus slideshow false $('.box_skitter_large').skitter({focus: true});
focus_position Position of button focus slideshow center $('.box_skitter_large').skitter({focus_position: 'leftTop'});
controls Option play/pause manually false $('.box_skitter_large').skitter({controls: true});
controls_position Position of button controls center $('.box_skitter_large').skitter({controls_position: 'rightBottom'});

我爱模板网