- cube

- cubeRandom

- block

- cubeStop

- cubeHide

- cubeSize

- horizontal

- showBars

- showBarsRandom

- tube

- fade

- fadeFour

- paralell

- blind

- blindHeight

- blindWidth

- directionTop

- directionBottom

- directionRight

- directionLeft

- cubeStopRandom

- cubeSpread

all cube cubeRandom block cubeStop cubeHide cubeSize horizontal showBars showBarsRandom tube fade fadeFour paralell blind blindHeight blindWidth directionTop directionBottom directionRight directionLeft cubeStopRandom cubeSpread cubeJelly glassCube glassBlock circles circlesInside circlesRotate cubeShownew! upBarsnew! downBarsnew! random randomSmart

## 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

    // 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

    $(function(){

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

    });

## HTML

    <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

    <?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'});