/* * Zanate Slider 0.1 - jQuery plugin * written by Pablo j. Valle * http://www.cenicsa.com.ni/zanate * http://code.google.com/p/zanate/ * * Copyright (c) 2009 pablo j. valle (http://www.cenicsa.com.ni) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Built for jQuery library * http://jquery.com * */ (function($) { $.fn.zanate = function(options){ var defaults = { control: true, continuous: true, direction: 'left', //human movement: right, left, not yet tested with:up, down deslide: true, //change direction on click firstSlide: 0, //any number (todo: validate) vertical: false, //posible: true, false speed: 1000, //any miliseconds pause: 2000, //any miliseconds auto: true, //default. Manual when stopped height: 265, width: 260, method: "POST", slide_directory: "images/PhotoGallery", //directory where your images resides php_script: "getslides.php", //the php script to load images. slide_name: "zanate_sample", //just a number to external access slideMarkup: "li", //wich part of the structure autoreload: 0 //not implemented. Todo: reload every nnn seconds }; var options = $.extend(defaults, options); var $this = $(this); //the Main Class for zanate plugin var quiscalus = { //todo: include easing go: function(slideMoving){ this.lastSlide = this.actualSlide; this.actualSlide = slideMoving > -1 ? slideMoving: this.actualSlide; pauseToSlide = options.pause; this.showSlide(slideMoving, options.speed); //animate! var nextSlideToMove = this.nextToMove(); if(this.getClicked()){ this.setClicked(false); pauseToSlide = 2 * pauseToSlide; } quiscalus.timeOut = setTimeout( function(){quiscalus.go(nextSlideToMove);}, pauseToSlide); },//go nextToMove: function(){ return (this.goOrder() ? this.slideToRight(): this.slideToLeft());}, showSlide: function(slideNumber, showSpeed){ var slideOffSet = -1 * slideNumber * (options.vertical ? options.height: options.width); //up-down or left-right var animStyle = options.vertical ? {marginTop: slideOffSet} : {marginLeft: slideOffSet}; this.theFrame.animate(animStyle, showSpeed); //animate! }, getClicked: function(){ return this.clicked; }, setClicked: function(theStatus){ this.clicked = theStatus;}, goOrder: function(){ return( (options.direction != 'right' || !options.direction)? true: false);}, setOrder: function(direction){ options.direction = (direction=='l'||!direction)? 'left': 'right';}, slideToLeft: function(){ return( this.actualSlide <= 0 ? this.totalSlides: this.actualSlide - 1);}, slideToRight:function(){ return( this.actualSlide >= this.totalSlides ? 0: this.actualSlide + 1);}, stopSlide: function(){clearTimeout( quiscalus.timeOut );}, firstSlide: function(){ this.go(0); }, finalSlide: function(){ this.go(this.totalSlides);}, goLeft: function(){ if(options.deslide) this.setOrder('l');this.go(quiscalus.slideToRight());}, goRight: function(){ if(options.deslide) this.setOrder('r');this.go(quiscalus.slideToLeft());}, goAction: function(action){ this.stopSlide(); this.setClicked(true); switch(action){ case 'first': this.firstSlide();break; case 'prev': quiscalus.goLeft();break; case 'stop': quiscalus.stopSlide();break; case 'play': case 'next': quiscalus.goRight(); break; case 'last': quiscalus.finalSlide();break; }//endswitch }, setEvents: function(){ //events to work with keyboard: left & right $(quiscalus.slide).keydown(function(event){ quiscalus.setClicked(true); quiscalus.stopSlide(); theKey = event.keyCode; switch (theKey) { case 34: //Page Down case 35: //end case 40: //down quiscalus.lastSlide(); break; case 36: //home case 33: //page Up case 38: //up quiscalus.firstSlide(); break; case 37: //left quiscalus.goLeft(); break; case 40: //down case 39: //right quiscalus.goRight(); break; }//switch }); }, //setEvents showControl: function(controlBox){ var slideControl = document.createElement('div') //Frame for controls $(slideControl).addClass('control_box'); //clas in css file $(slideControl).css('id', 'controls'); var ul = document.createElement('ul'); //controls list $.each(this.controls, function(id, elem){ //control in the q class var control = this; var li = document.createElement('li'); $(li) .addClass(control.name) .attr({title:control.name, id: control.name}) .hover( function(){$(this).toggleClass("ctlHover");}, function(){$(this).addClass(control.name);}) .click(function(){ quiscalus.goAction(control.name);}); $(ul).append(li); }); $(ul).appendTo(slideControl); $(slideControl).appendTo(controlBox); } }; //close quiscalus $q = quiscalus; //the Class ops = options; //the options $q.totalSlides = 0; //total $q.timeOut = 0; $q.actualSlide = 0; //slide in action $q.lastSlide = 0; $q.clicked = false; //key pressed $q.theFrame = $this ; //Framing slides in action $q.controls = [ { name : 'first', tip: 'First'}, { name : 'prev', tip: 'Previous'}, { name : 'stop', tip: 'stop'}, { name : 'next', tip: 'Next'}, { name : 'last', tip: 'Last'} ]; var slider = document.createElement('div'); //create global container $q.slider = $slider = $(slider); $slider.appendTo($this); $slider.addClass('zanate').css('position', 'relative'); $slider.attr('id', defaults.slide_name ); //container name //this allow you put new images any time //to show without any changes in script $.ajax({ //load content type: defaults.method, url: defaults.php_script, //Php script can be an url cache: false, data:{ slide_directory: defaults.slide_directory, slide_name: defaults.slide_name }, success: function(data){ $slider.html(data); startSliding($slider, options); } }); // ajax ends startSliding = function(slider, op) { $(slider).each(function(itemId, nameShelter) { $q.setEvents(); pauseBetween = op.pause; var $slideShelter = $(this); //Get elements to Slide var $slidesIn = op.slideMarkup ? $(op.slideMarkup, this) : $slideShelter.children(); var slideElements = $slidesIn.get(); //get slides elements var numberOfSlides = slideElements.length; $q.totalSlides = numberOfSlides - 1; // Shelter size op.width = op.width ? op.width : $slidesIn.width(); op.height = op.height ? op.height: $slidesIn.height(); //$slideShelter.css("overflow","hidden"); slider.css("overflow","hidden"); $q.theFrame = $(op.slideMarkup, slider).parent(); $q.theFrame.css('width', numberOfSlides * op.width); if(op.control){ //if you need it, show control box $q.showControl($slideShelter); } if(!op.vertical) $(op.slideMarkup, slider).css('float','left'); var slideTo = op.firstSlide ? op.firstSlide : $q.nextToMove(); $slidesIn.width(op.width); //slides sizes $slidesIn.height(op.height); /*$slideShelter.width(op.width); //slides box size $slideShelter.height(op.height); */ slider.width(op.width); //slides box size slider.height(op.height); quiscalus.timeOut = setTimeout(function(){quiscalus.go(slideTo);}, pauseBetween) }); return slider; }//make slide }; //ends zanate })(jQuery);