JS Tutorial
- Overview
- Documents
Skitter – A jQuery Slideshow Plugin With Flexible Animations
Skitter is a jQuery plugin that enables us to convert unordered lists into slideshows with attractive animations. The slideshow can display the list of slides as numbers or thumbnails and items can be browsed with the help of prev-next buttons as well.
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>
- 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" });
