YMslider jQuery Plugin v.1.0.8

It is a simple dynamic, light-weight (2,2K minified, lighter GZipped) and non-intrusive content slider jQuery plugin, fully CSS customizable (theme support) with respect of accessibility and W3C standard rules (strict xHTML valid) ...
 
... and also actually my very first jQuery Plugin !
 
See the Google Code project page for more informations and download link.
 
If this plugin saved you life, please donate.

• Do nothing

  1. There is only one list-item so the plugin does nothing.

• Default values

  1. There is more than one list-item so ...

  2. ... the plugin does display a slideshow with some default values ...

  3. ... the first displayed panel is the first list-item ...

  4. ... automatic animation mode is set to true ...

  5. ... animation duration is set to 1 second ...

  6. ... animation easing is set to swing ...

  7. ... pause duration is set to 10 seconds ...

  8. ... pause on hover is set to true ...

  9. ... the beyboard controls (left and right arrows) are set to true ...

  10. ... the control links are inserted after the animated panels ...

  11. ... the spacer between two control links is a space (blank) character ...

  12. ... and the control links' title attribute value is set to "Move to the $ID panel $NB/$TOT : $TIT" ...

  13. ... the top parameter is set to false ...

  14. ... start callback is set to null.

  15. ... stop callback is set to null.

• Panel initialization

  1. You can initialize the display of the panel you want ...

  2. ... with this single line of code : $('#init').YMslider({init:2});

• Auto mode

  1. You can also turn off the automatic animation mode ...

  2. ... with this single line of code : $('#auto').YMslider({auto:false});

• Animation duration

  1. You can also shorten the animation duration to 0.25 seconds ...

  2. ... with this single line of code : $('#anim').YMslider({anim:.25});

• Animation easing

  1. You can also change the animation easing to easeOutBounce ...

  2. ... with this single line of code : $('#easing').YMslider({easing:'easeOutBounce'});

• Pause duration (only if auto mode is on)

  1. You can also shorten the pause duration to 5 seconds ...

  2. ... with this single line of code : $('#pause').YMslider({pause:5});

• Pause on hover (only if auto mode is on)

  1. You can also turn off the pause on hover ...

  2. ... with this single line of code : $('#hover').YMslider({hover:false});

• Keyboard controls

  1. You can also turn off the keyboard controls ...

  2. ... with this single line of code : $('#keyboard').YMslider({keyboard:false});

• Control links

  1. You can also insert the control links before the animated items ...

  2. ... with this single line of code : $('#controls').YMslider({controls:'before'}); ...

  3. ... or even turn off the control links ...

  4. ... with this single line of code : $('#controls').YMslider({controls:false});

• Controls spacer

  1. You can also add a pipe character between the controls links ...

  2. ... with this single line of code : $('#spacer').YMslider({spacer:' | '});
    (try blueRed theme to see)

• Scroll to top

  1. Each time you
    click on a control link
    or use the keyboard arrow keys
    while the window has scrolled
    more than the YMslider's top offset,
    it can automatically scroll
    back to the YMslider's top edge
    using an URL anchor/hash ...

  2. ... with this single line of code : $('#top').YMslider({top:true});

• Title attribute

  1. You can also change the control links' title attribute value to "Whatever you want" ...

  2. ... with this single line of code : $('#title').YMslider({title:'Whatever you want'});

• Start callback

  1. You can also call a callback function when the panels animation begins ...

  2. ... like this :

    $('#spacer').YMslider({
    	start:function(){
    		this.find('.panel.active').css(
    			'background-color','#99f'
    		).siblings('.panel').css(
    			'background-color','transparent'
    		);
    	}
    });

• Stop callback

  1. You can also call a callback function when the panels animation has finished ...

  2. ... like this :

    $('#spacer').YMslider({
    	stop:function(){
    		this.find('.panel.active').css(
    			'background-color','#9f9'
    		).siblings('.panel').css(
    			'background-color':'transparent'
    		);
    	}
    });

• Put everything together

  1. Finally, you can put all these previous parameters together ...

  2. ... like this :

    $('#together').YMslider({
    	init:2,
    	auto:false,
    	anim:.25,
    	keyboard:false,
    	controls:'before',
    	spacer:' | ',
    	title:'Whatever you want',
    	start:function(){
    		this.find('.panel.active').css('background-color','#99f').siblings('.panel').css('background-color','transparent');
    	},
    	stop:function(){
    		this.find('.panel.active').css('background-color','#9f9').siblings('.panel').css('background-color','transparent');
    	}
    });
  3. ... or do it once for all like that :

    $.fn.YMslider.defaults={
    	init:2,
    	auto:false,
    	anim:.25,
    	keyboard:false,
    	controls:'before',
    	spacer:' | ',
    	title:'Whatever you want',
    	start:function(){
    		this.find('.panel.active').css('background-color','#99f').siblings('.panel').css('background-color','transparent');
    	},
    	stop:function(){
    		this.find('.panel.active').css('background-color','#9f9').siblings('.panel').css('background-color','transparent');
    	}
    };

• Tabs example

  1. Some content 1

  2. Some content 2

  3. Some content 3

  4. Some content 4

  5. Some content 5

  6. The trick is to setup the YMslider options like that ...
    $('#tabs').YMslider({auto:false,anim:0,controls:'before'});
    ... and let CSS do the magic.

• Content slideshow example

  1. A bee who likes pumkins
  2. Some soldering sparks
  3. A bird onto a roof
  4. A part of my zen garden
  5. The trick is to use the YMslider start/stop callback options like that ...

    var firstCallback=true;
    $('#slideshow').YMslider({anim:.5,pause:5,start:function(){
    	if(!firstCallback)this.find('.controls').slideUp();
    },stop:function(){
    	(!firstCallback)?this.find('.controls').slideDown():firstCallback=false;
    }}).find('.controls').css('opacity',.75);

    ... and let CSS do the magic.