Skitter - Slideshow for anytime!

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

HTML
XML

Type of navigation

Other options

Other view

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