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.
There is only one list-item so the plugin does nothing.
There is more than one list-item so ...
... the plugin does display a slideshow with some default values ...
... the first displayed panel is the first list-item ...
... automatic animation mode is set to true ...
... animation duration is set to 1 second ...
... animation easing is set to swing ...
... pause duration is set to 10 seconds ...
... pause on hover is set to true ...
... the beyboard controls (left and right arrows) are set to true ...
... the control links are inserted after the animated panels ...
... the spacer between two control links is a space (blank) character ...
... and the control links' title attribute value is set to "Move to the $ID panel $NB/$TOT : $TIT" ...
... the top parameter is set to false ...
... start callback is set to null.
... stop callback is set to null.
You can initialize the display of the panel you want ...
... with this single line of code : $('#init').YMslider({init:2});
You can also turn off the automatic animation mode ...
... with this single line of code : $('#auto').YMslider({auto:false});
You can also shorten the animation duration to 0.25 seconds ...
... with this single line of code : $('#anim').YMslider({anim:.25});
You can also change the animation easing to easeOutBounce ...
... with this single line of code : $('#easing').YMslider({easing:'easeOutBounce'});
You can also shorten the pause duration to 5 seconds ...
... with this single line of code : $('#pause').YMslider({pause:5});
You can also turn off the pause on hover ...
... with this single line of code : $('#hover').YMslider({hover:false});
You can also turn off the keyboard controls ...
... with this single line of code : $('#keyboard').YMslider({keyboard:false});
You can also insert the control links before the animated items ...
... with this single line of code : $('#controls').YMslider({controls:'before'}); ...
... or even turn off the control links ...
... with this single line of code : $('#controls').YMslider({controls:false});
You can also add a pipe character between the controls links ...
... with this single line of code : $('#spacer').YMslider({spacer:' | '});
(try blueRed theme to see)
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 ...
... with this single line of code : $('#top').YMslider({top:true});
You can also change the control links' title attribute value to "Whatever you want" ...
... with this single line of code : $('#title').YMslider({title:'Whatever you want'});
You can also call a callback function when the panels animation begins ...
... like this :
$('#spacer').YMslider({
start:function(){
this.find('.panel.active').css(
'background-color','#99f'
).siblings('.panel').css(
'background-color','transparent'
);
}
});You can also call a callback function when the panels animation has finished ...
... like this :
$('#spacer').YMslider({
stop:function(){
this.find('.panel.active').css(
'background-color','#9f9'
).siblings('.panel').css(
'background-color':'transparent'
);
}
});Finally, you can put all these previous parameters together ...
... 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');
}
});... 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');
}
};Some content 1
Some content 2
Some content 3
Some content 4
Some content 5
The trick is to setup the YMslider options like that ...$('#tabs').YMslider({auto:false,anim:0,controls:'before'});
... and let CSS do the magic.
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.
Copyright © - 2009/2010 - MAXymeum Prod.