//////////////////////////////////////////////////
// //
// jQuery Element Slider script v 2.0 //
// by Silas Landricombe - December 2011 //
// //
//////////////////////////////////////////////////
(function ($) {
$.fn.siSlide = function(options) {
var opts = $.extend({}, $.fn.siSlide.defaults, options);
var instance = $(this); var domString = ''; var sliding = false;
var nextslide; var interval;
return this.each(function() {
$(this).css({
'position' : 'relative',
'overflow' : 'hidden',
'width' : opts.width,
'height' : opts.height
});
$(this).children(opts.wrapperType).each(function(i){
$(this).css({
'position' : 'absolute',
'display' : 'inline',
'z-index' : '1',
'opacity' : opts.startOpacity
}).attr('data-slidenumber', i);
switch (opts.slideTowards) {
case 'left':
$(this).css('left', opts.width);
break;
case 'right':
$(this).css('left', '-' + opts.width);
break;
case 'top':
$(this).css('top', opts.height);
break;
case 'bottom':
$(this).css('top', '-' + opts.height);
break;
}
});
if(opts.showMenu){
var optClass = '';
opts.ulClass != '' ? optClass=' class="' + opts.ulClass + '"' : optClass = '';
domString = '
'; var selectedClass = '';
$.each($(this).children(opts.wrapperType), function(i){
i == 0 ? selectedClass=' class="' + opts.selectClass + '"' : selectedClass = '';
domString += '- ' + (i + 1) + '
';
});
domString += '
'; instance.append(domString);
var idLinks = $(this).find('a').click(onClick);
}
slideIn(0, 0); nextslide = 1;
if(opts.autoPlay){ autoSlide(); }
});
function onClick() {
if(!$(this).hasClass(opts.selectClass) && !sliding){
instance.find('a').removeClass(opts.selectClass);
$(this).addClass(opts.selectClass);
slideIn($(this).attr('data-slideorder'), opts.slideSpeed, this);
nextslide = $(this).attr('data-slideorder');
if(opts.autoPlay){ autoSlide(); }
}
return false;
}
function autoSlide(){
if (interval) { clearInterval(interval) };
interval = setInterval(function(){
slideIn(nextslide, opts.slideSpeed, instance.find('a[data-slideorder=' + nextslide + ']'));
}, opts.autoSpeed);
return false;
}
function slideIn(e, s, l) {
sliding = true;
switch (opts.slideTowards) {
case 'left':
$(opts.wrapperType + '[data-slidenumber="' + e + '"]').css('z-index', '2').animate({
opacity: opts.endOpacity,
left: '-=' + opts.width
}, s, oncomplete);
break;
case 'right':
$(opts.wrapperType + '[data-slidenumber="' + e + '"]').css('z-index', '2').animate({
opacity: opts.endOpacity,
left: '+=' + opts.width
}, s, oncomplete);
break;
case 'top':
$(opts.wrapperType + '[data-slidenumber="' + e + '"]').css('z-index', '2').animate({
opacity: opts.endOpacity,
top: '-=' + opts.height
}, s, oncomplete);
break;
case 'bottom':
$(opts.wrapperType + '[data-slidenumber="' + e + '"]').css('z-index', '2').animate({
opacity: opts.endOpacity,
top: '+=' + opts.height
}, s, oncomplete);
break;
}
function oncomplete(){
if(l){
instance.find('a').removeClass(opts.selectClass);
$(l).addClass(opts.selectClass);
}
resetPos(e);
e == (instance.children(opts.wrapperType).length - 1) ? nextslide = 0 : nextslide ++;
sliding = false;
}
return false;
}
function resetPos(n) {
var containers = $(opts.wrapperType + '[data-slidenumber]');
$.each(containers, function(e){
if($(this).attr('data-slidenumber') != n){
$(this).css('opacity', opts.startOpacity);
switch (opts.slideTowards) {
case 'left':
$(this).css('left', opts.width);
break;
case 'right':
$(this).css('left', '-' + opts.width);
break;
case 'top':
$(this).css('top', opts.height);
break;
case 'bottom':
$(this).css('top', '-' + opts.height);
break;
}
} $(this).css('z-index', 'auto');
});
return false;
}
}
$.fn.siSlide.defaults = {
wrapperType : 'div',
slideSpeed : 400,
startOpacity : '0.5',
endOpacity : '1',
selectClass : 'current',
ulClass : '',
autoPlay : false,
autoSpeed : 5000,
slideTowards : 'left',
showMenu : true
}
})(jQuery);