xp-dev.com Git - namibia/blob - public/js/vendor/jquery.thumbnailScroller.js

   1 /*
   2 Thumbnail scroller jQuery plugin
   3 Author: malihu [http://manos.malihu.gr]
   4 Homepage: manos.malihu.gr/jquery-thumbnail-scroller
   5 */
   6 (function($){
   7  $.fn.thumbnailScroller=function(options){
   8         var defaults={ //default options
   9                 scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
  10                 scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
  11                 scrollEasing:"easeOutCirc", //easing type
  12                 scrollEasingAmount:800, //value: milliseconds
  13                 acceleration:2, //value: integer
  14                 scrollSpeed:600, //value: milliseconds
  15                 noScrollCenterSpace:0, //value: pixels
  16                 autoScrolling:0, //value: integer
  17                 autoScrollingSpeed:8000, //value: milliseconds
  18                 autoScrollingEasing:"easeInOutQuad", //easing type
  19                 autoScrollingDelay:2500 //value: milliseconds
  20         };
  21         var options=$.extend(defaults,options);
  22     return this.each(function(){
  23                 //cache vars
  24                 var $this=$(this);
  25                 var $scrollerContainer=$this.children(".jTscrollerContainer");
  26                 var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller");
  27                 var $scrollerNextButton=$this.children(".jTscrollerNextButton");
  28                 var $scrollerPrevButton=$this.children(".jTscrollerPrevButton");
  29                 //set scroller width
  30                 if(options.scrollerOrientation=="horizontal"){
  31                         $scrollerContainer.css("width",999999);
  32                         var totalWidth=$scroller.outerWidth(true);
  33                         $scrollerContainer.css("width",totalWidth);
  34                 }else{
  35                         var totalWidth=$scroller.outerWidth(true);
  36                 }
  37                 var totalHeight=$scroller.outerHeight(true); //scroller height
  38                 //do the scrolling
  39                 if(totalWidth>$this.width() || totalHeight>$this.height()){ //needs scrolling
  40                         var pos;
  41                         var mouseCoords;
  42                         var mouseCoordsY;
  43                         if(options.scrollerType=="hoverAccelerate"){ //type hoverAccelerate
  44                                 var animTimer;
  45                                 var interval=8;
  46                                 $this.hover(function(){ //mouse over
  47                                         $this.mousemove(function(e){
  48                                                 pos=findPos(this);
  49                                                 mouseCoords=(e.pageX-pos[1]);
  50                                                 mouseCoordsY=(e.pageY-pos[0]);
  51                                         });
  52                                         clearInterval(animTimer);
  53                                         animTimer = setInterval(Scrolling,interval);
  54                                 },function(){  //mouse out
  55                                         clearInterval(animTimer);
  56                                         $scroller.stop();
  57                                 });
  58                                 $scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
  59                         }else if(options.scrollerType=="clickButtons"){
  60                                 ClickScrolling();
  61                         }else{ //type hoverPrecise
  62                                 pos=findPos(this);
  63                                 $this.mousemove(function(e){
  64                                         mouseCoords=(e.pageX-pos[1]);
  65                                         mouseCoordsY=(e.pageY-pos[0]);
  66                                         var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
  67                                         var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
  68                                         var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
  69                                         var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
  70                                         $scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing);
  71                                 });
  72                                 $scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
  73                         }
  74                         //auto scrolling
  75                         if(options.autoScrolling>0){
  76                                 AutoScrolling();
  77                         }
  78                 } else {
  79                         //no scrolling needed
  80                         $scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
  81                 }
  82                 //"hoverAccelerate" scrolling fn
  83                 var scrollerPos;
  84                 var scrollerPosY;
  85                 function Scrolling(){
  86                         if((mouseCoords<$this.width()/2) && ($scroller.position().left>=0)){
  87                                 $scroller.stop(true,true).css("left",0);
  88                         }else if((mouseCoords>$this.width()/2) && ($scroller.position().left<=-(totalWidth-$this.width()))){
  89                                 $scroller.stop(true,true).css("left",-(totalWidth-$this.width()));
  90                         }else{
  91                                 if((mouseCoords<=($this.width()/2)-options.noScrollCenterSpace) || (mouseCoords>=($this.width()/2)+options.noScrollCenterSpace)){
  92                                         scrollerPos=Math.round(Math.cos((mouseCoords/$this.width())*Math.PI)*(interval+options.acceleration));
  93                                         $scroller.stop(true,true).animate({left:"+="+scrollerPos},interval,"linear");
  94                                 }else{
  95                                         $scroller.stop(true,true);
  96                                 }
  97                         }
  98                         if((mouseCoordsY<$this.height()/2) && ($scroller.position().top>=0)){
  99                                 $scroller.stop(true,true).css("top",0);
 100                         }else if((mouseCoordsY>$this.height()/2) && ($scroller.position().top<=-(totalHeight-$this.height()))){
 101                                 $scroller.stop(true,true).css("top",-(totalHeight-$this.height()));
 102                         }else{
 103                                 if((mouseCoordsY<=($this.height()/2)-options.noScrollCenterSpace) || (mouseCoordsY>=($this.height()/2)+options.noScrollCenterSpace)){
 104                                         scrollerPosY=Math.cos((mouseCoordsY/$this.height())*Math.PI)*(interval+options.acceleration);
 105                                         $scroller.stop(true,true).animate({top:"+="+scrollerPosY},interval,"linear");
 106                                 }else{
 107                                         $scroller.stop(true,true);
 108                                 }
 109                         }
 110                 }
 111                 //auto scrolling fn
 112                 var autoScrollingCount=0;
 113                 function AutoScrolling(){
 114                         $scroller.delay(options.autoScrollingDelay).animate({left:-(totalWidth-$this.width()),top:-(totalHeight-$this.height())},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
 115                                 $scroller.animate({left:0,top:0},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
 116                                         autoScrollingCount++;
 117                                         if(options.autoScrolling>1 && options.autoScrolling!=autoScrollingCount){
 118                                                 AutoScrolling();
 119                                         }
 120                                 });
 121                         });
 122                 }
 123                 //click scrolling fn
 124                 function ClickScrolling(){
 125                         $scrollerPrevButton.hide();
 126                         $scrollerNextButton.show();
 127                         $scrollerNextButton.click(function(e){ //next button
 128                                 e.preventDefault();
 129                                 var posX=$scroller.position().left;
 130                                 var diffX=totalWidth+(posX-$this.width());
 131                                 var posY=$scroller.position().top;
 132                                 var diffY=totalHeight+(posY-$this.height());
 133                                 $scrollerPrevButton.stop().show("fast");
 134                                 if(options.scrollerOrientation=="horizontal"){
 135                                         if(diffX>=$this.width()){
 136                                                 $scroller.stop().animate({left:"-="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
 137                                                         if(diffX==$this.width()){
 138                                                                 $scrollerNextButton.stop().hide("fast");
 139                                                         }
 140                                                 });
 141                                         } else {
 142                                                 $scrollerNextButton.stop().hide("fast");
 143                                                 $scroller.stop().animate({left:$this.width()-totalWidth},options.scrollSpeed,options.scrollEasing);
 144                                         }
 145                                 }else{
 146                                         if(diffY>=$this.height()){
 147                                                 $scroller.stop().animate({top:"-="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
 148                                                         if(diffY==$this.height()){
 149                                                                 $scrollerNextButton.stop().hide("fast");
 150                                                         }
 151                                                 });
 152                                         } else {
 153                                                 $scrollerNextButton.stop().hide("fast");
 154                                                 $scroller.stop().animate({top:$this.height()-totalHeight},options.scrollSpeed,options.scrollEasing);
 155                                         }
 156                                 }
 157                         });
 158                         $scrollerPrevButton.click(function(e){ //previous button
 159                                 e.preventDefault();
 160                                 var posX=$scroller.position().left;
 161                                 var diffX=totalWidth+(posX-$this.width());
 162                                 var posY=$scroller.position().top;
 163                                 var diffY=totalHeight+(posY-$this.height());
 164                                 $scrollerNextButton.stop().show("fast");
 165                                 if(options.scrollerOrientation=="horizontal"){
 166                                         if(posX+$this.width()<=0){
 167                                                 $scroller.stop().animate({left:"+="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
 168                                                         if(posX+$this.width()==0){
 169                                                                 $scrollerPrevButton.stop().hide("fast");
 170                                                         }
 171                                                 });
 172                                         } else {
 173                                                 $scrollerPrevButton.stop().hide("fast");
 174                                                 $scroller.stop().animate({left:0},options.scrollSpeed,options.scrollEasing);
 175                                         }
 176                                 }else{
 177                                         if(posY+$this.height()<=0){
 178                                                 $scroller.stop().animate({top:"+="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
 179                                                         if(posY+$this.height()==0){
 180                                                                 $scrollerPrevButton.stop().hide("fast");
 181                                                         }
 182                                                 });
 183                                         } else {
 184                                                 $scrollerPrevButton.stop().hide("fast");
 185                                                 $scroller.stop().animate({top:0},options.scrollSpeed,options.scrollEasing);
 186                                         }
 187                                 }
 188                         });
 189                 }
 190         });
 191  };
 192 })(jQuery);
 193 //global js functions
 194 //find element Position
 195 function findPos(obj){
 196         var curleft=curtop=0;
 197         if (obj.offsetParent){
 198                 curleft=obj.offsetLeft
 199                 curtop=obj.offsetTop
 200                 while(obj=obj.offsetParent){
 201                         curleft+=obj.offsetLeft
 202                         curtop+=obj.offsetTop
 203                 }
 204         }
 205         return [curtop,curleft];
 206 }