Saturday, May 28, 2011

Simple Slider jQuery component

Hi All, I am sure if you're a web developer, you have used jQuery, or a jQuery plugin. I sure know I have, but now, I want to contribute one.

I have written a jQuery plugin which I call the "Sliderizer".

To use it, simply create an un-ordered list like such:

<ul class="someList">
   <li>Slide 1</li>
   <li>Slide 2</li>
   <li>Slide 3</li>
   <li>Slide 4</li>
</ul>

then select it, and call the Sliderizer like so:

$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });

You can configure it with the following options:
height : integer     (defaults to 300)
width  : integer     (defaults to 300)
speed : integer     (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string   (default to horizontal)  -This can be horizontal or vertical

Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!



(function($){  
$.fn.sliderize = function(options) 
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011

//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}


if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}

if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide

//set defaults
var defaults = {
  height: "300",
  width: "300",
  speed: "1000",
  direction: "horizontal"
};
 
var options = $.extend(defaults, options);
//If there are one or more elements, return them  
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";


if ($(this).attr('id')) {
thisId = $(this).attr('id') +  '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}

$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');

$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});

$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');  
});

$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide


$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');


$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');

$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up",  options.width, options.speed );
}
});

$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down",  options.width, options.speed );
}
});

$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start

});// endeach function
 
};//end function sliderize
})(jQuery);//end function decleration

No comments:

Post a Comment