View Animations

  • cut

  • swapBlocks

  • swapBarsBack

  • swapBars

  • hideBars

  • downBars

  • upBars

  • cubeShow

  • circlesRotate

  • circlesInside

Configuration Apply 
<!-- 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.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

<!-- Init Plugin -->
<script>
	$(document).ready(function() {
		$(".box_skitter_large").skitter({
			theme: "square", 
 			numbers_align: "center", 
 			dots: true, 
 			preview: true, 
 			focus: true, 
 			focus_position: "leftTop", 
 			controls: true, 
 			controls_position: "leftTop", 
 			progressbar: true, 
 			enable_navigation_keys: true
		});
	});
</script>

How to install

See how to install Skitter Slideshow on your website or blog, it's very simple and fast!

Add the CSS and JS files inside <head>

<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

Init the Skitter

<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		$(".box_skitter_large").skitter();
	});
</script>

Add the images through the unordered list

<div class="box_skitter box_skitter_large">
	<ul>
		<li>
			<a href="#cut"><img src="images/001.jpg" class="cut" /></a>
			<div class="label_text"><p>cut</p></div>
		</li>
		<li>
			<a href="#swapBlocks"><img src="images/002.jpg" class="swapBlocks" /></a>
			<div class="label_text"><p>swapBlocks</p></div>
		</li>
		<li>
			<a href="#swapBarsBack"><img src="images/003.jpg" class="swapBarsBack" /></a>
			<div class="label_text"><p>swapBarsBack</p></div>
		</li>
	</ul>
</div>

Documentation

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

imageSwitched

Function call to change image

Default null

Accept function

Example $('.box_skitter_large').skitter({ imageSwitched: funtion( image_i, self ) { console.log( image_i); } });

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

labelAnimation

Label animation type

Default slideUp

Accept slideUp, left, right, fixed

Example $('.box_skitter_large').skitter({ labelAnimation: 'left' });

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

progressbar

Displays progress bar

Default false

Accept true

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

progressbar_css

CSS progress bar

Default false

Accept true

Example $('.box_skitter_large').skitter({ progressbar_css: { backgroundColor: '#000' } });

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

theme

Slideshow theme

Default null

Accept minimalist, round, clean, square

Example $('.box_skitter_large').skitter({ theme: 'square' });

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

25/04/2013
- Bug fix hideTools
14/04/2013
- Bug fix back page in Firefox, creating two instances of Skitter.
- Bug fix with link target
- Bug fix focus slideshow
- Removed color animation library (jquery.animate-colors-min.js) and added animation through css
- Themes for Skitter: default, minimalist, round, clean and square!
07/04/2013
- Bug fix: stop_over
- Bug fix: hideTools
- Added animation option labels: labelAnimation
04/09/2012
- Bug fix jquery 1.8: update jquery-color-animation
19/04/2012
- Bug fix: in IE was jumping two slides to start.
- Bug fix: 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!

Download

Comments

Comments powered by Disqus
Up!