cut
swapBlocks
swapBarsBack
swapBars
hideBars
downBars
upBars
cubeShow
circlesRotate
circlesInside

HTML
XML

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

<!-- JS -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

<!-- Init Plugin -->
<script>
	$(document).ready(function() {
		$(".box_skitter_large").skitter({
			numbers_align: "center", 
 			dots: true, 
 			preview: true, 
 			focus: true, 
 			focus_position: "leftTop", 
 			controls: true, 
 			controls_position: "leftTop", 
 			progressbar: true, 
 			progressbar_css: { 
				top:'5px', 
				left:'590px', 
				height:10, 
				borderRadius:'2px', 
				width:200, 
				backgroundColor:'#000', 
				opacity:.7 
			}, 
 			animateNumberOver: { 'backgroundColor':'#555' }, 
 			enable_navigation_keys: true
		});
	});
</script>

Documentation

Attributes

animateNumberActive

Animation/style active number/dot

Default {backgroundColor:'#cc3333', color:'#fff'}

Accept array

Example $('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});

animateNumberOut

Animation/style number/dot

Default {backgroundColor:'#333', color:'#fff'}

Accept array

Example $('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});

animateNumberOver

Animation/style hover number/dot

Default {backgroundColor:'#000', color:'#fff'}

Accept array

Example $('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});

animation

Default animation

Default null or defined in <a> class

Accept 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, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart

Example $('.box_skitter_large').skitter({animation: 'fade'});

auto_play

Sets whether the slideshow will start automatically

Default true

Accept false

Example $('.box_skitter_large').skitter({ auto_play: false; });

controls

Option play/pause manually

Default false

Accept true, false

Example $('.box_skitter_large').skitter({controls: true});

controls_position

Position of button controls

Default center

Accept center, leftTop, rightTop, leftBottom, rightBottom

Example $('.box_skitter_large').skitter({controls_position: 'rightBottom'});

dots

Navigation with dots

Default false

Accept true, false

Example $('.box_skitter_large').skitter({dots: true});

easing_default

Easing default

Default null

Accept null, ease type

Example $('.box_skitter_large').skitter({easing_default: 'easeOutBack'});

enable_navigation_keys

Enable navigation keys

Default false

Accept true, false

Example $('.box_skitter_large').skitter({enable_navigation_keys: true});

focus

Focus slideshow

Default false

Accept true, false

Example $('.box_skitter_large').skitter({focus: true});

focus_position

Position of button focus slideshow

Default center

Accept center, leftTop, rightTop, leftBottom, rightBottom

Example $('.box_skitter_large').skitter({focus_position: 'leftTop'});

fullscreen

Fullscreen mode

Default false

Accept true, false

Example $('.box_skitter_large').skitter({fullscreen: true});

hideTools

Hide numbers and navigation

Default false

Accept true, false

Example $('.box_skitter_large').skitter({hideTools: true});

interval

Interval between transitions

Default 2500

Accept integer

Example $('.box_skitter_large').skitter({interval: 3000});

label

Label display

Default true

Accept true, false

Example $('.box_skitter_large').skitter({label: false});

mouseOutButton

Function call to go out the navigation buttons

Default function() { $(this).stop().animate({opacity:0.5}, 200); }

Accept function() { $(this).stop().animate({opacity:0.2}, 500); }

Example $('.box_skitter_large').skitter({ mouseOutButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

mouseOverButton

Function call to go over the navigation buttons

Default function() { $(this).stop().animate({opacity:0.5}, 200); }

Accept function() { $(this).stop().animate({opacity:0.2}, 500); }

Example $('.box_skitter_large').skitter({ mouseOverButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

navigation

Navigation display

Default true

Accept true, false

Example $('.box_skitter_large').skitter({navigation: false});

numbers

Numbers display

Default true

Accept true, false

Example $('.box_skitter_large').skitter({numbers: false});

numbers_align

Alignment of numbers/dots/thumbs

Default left

Accept center, left, right

Example $('.box_skitter_large').skitter({numbers_align: 'center'});

onLoad

Callback

Default null

Accept null, function

Example $('.box_skitter_large').skitter({onLoad: function(self) { console.log(self.settings.animation); } });

preview

Preview with dots

Default false

Accept true, false

Example $('.box_skitter_large').skitter({dots: true, preview: true});

show_randomly

Randomly sliders

Default false

Accept true, false

Example $('.box_skitter_large').skitter({show_randomly: true});

stop_over

Stop animation to move mouse over it.

Default true

Accept false

Example $('.box_skitter_large').skitter({ stop_over: false; });

thumbs

Navigation with thumbs

Default false

Accept true, false

Example $('.box_skitter_large').skitter({thumbs: true});

velocity

Velocity of animation

Default 1

Accept 0 to 2 (float)

Example $('.box_skitter_large').skitter({velocity: 0.5});

width_label

Width label

Default null

Accept css property (300px, auto)

Example $('.box_skitter_large').skitter({width_label: '300px'});

with_animations

Specific animations

Default []

Accept ['paralell', 'glassCube', 'swapBars']

Example $('.box_skitter_large').skitter({ with_animations: ['paralell', 'glassCube', 'swapBars']; });

xml

Loading data from XML file

Default false

Accept true, false

Example $('.box_skitter_large').skitter({xml: "xml/slides.xml"});

Updatelog

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 option: 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!

Skitter - Slideshow for anytime!

Documentation

Attributes

Updatelog

Download

Comments