• cube

  • cubeRandom

  • block

  • cubeStop

  • cubeHide

  • cubeSize

  • horizontal

  • showBars

  • showBarsRandom

  • tube

  • fade

  • fadeFour

  • paralell

  • blind

  • blindHeight

  • blindWidth

  • directionTop

  • directionBottom

  • directionRight

  • directionLeft

  • cubeStopRandom

  • cubeSpread

Type of loading

Type of navigation

Updatelog

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.

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