• 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

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