[Summary view] [Print] [Text view]

   1  /**
   2   * LofSliderNews
   3   * Copyright (c) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
   4   * This plugin is dual-licensed under the GNU General Public License and the MIT License
   5   * http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html
   6   */
   7  (function($) {
   8       $.fn.lofJSidernews = function( settings ) {
   9           return this.each(function() {
  10              // get instance of the lofSiderNew.
  11              new  $.lofSidernews( this, settings ); 
  12          });
  13        }
  14       $.lofSidernews = function( obj, settings ){
  15          this.settings = {
  16              direction            : '',
  17              mainItemSelector    : 'li',
  18              navInnerSelector    : 'ul',
  19              navSelector          : 'li' ,
  20              navigatorEvent        : 'click',
  21              wapperSelector:     '.lof-main-wapper',
  22              interval               : 4000,
  23              auto                : true, // whether to automatic play the slideshow
  24              maxItemDisplay         : 3,
  25              startItem            : 0,
  26              navPosition            : 'vertical', 
  27              navigatorHeight        : 100,
  28              navigatorWidth        : 310,
  29              duration            : 600,
  30              navItemsSelector    : '.lof-navigator li',
  31              navOuterSelector    : '.lof-navigator-outer' ,
  32              isPreloaded            : true,
  33              easing                : 'easeInOutQuad'
  34          }    
  35          $.extend( this.settings, settings ||{} );    
  36          this.nextNo         = null;
  37          this.previousNo     = null;
  38          this.maxWidth  = this.settings.mainWidth || 600;
  39          this.wrapper = $( obj ).find( this.settings.wapperSelector );    
  40          this.slides = this.wrapper.find( this.settings.mainItemSelector );
  41          if( !this.wrapper.length || !this.slides.length ) return ;
  42          // set width of wapper
  43          if( this.settings.maxItemDisplay > this.slides.length ){
  44              this.settings.maxItemDisplay = this.slides.length;    
  45          }
  46          this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
  47          this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );    
  48          this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
  49          this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
  50          
  51          if( this.settings.navPosition == 'horizontal' ){ 
  52              this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
  53              this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
  54              this.navigatorOuter.height(    this.settings.navigatorHeight );
  55              
  56          } else {
  57              this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );    
  58              
  59              this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
  60              this.navigatorOuter.width(    this.settings.navigatorWidth );
  61          }        
  62          this.navigratorStep = this.__getPositionMode( this.settings.navPosition );        
  63          this.directionMode = this.__getDirectionMode();  
  64          
  65          
  66          if( this.settings.direction == 'opacity') {
  67              this.wrapper.addClass( 'lof-opacity' );
  68              $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
  69          } else { 
  70              this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
  71          }
  72  
  73          
  74          if( this.settings.isPreloaded ) {
  75              this.preLoadImage( this.onComplete );
  76          } else {
  77              this.onComplete();
  78          }
  79          
  80       }
  81       $.lofSidernews.fn =  $.lofSidernews.prototype;
  82       $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
  83       
  84       $.lofSidernews.fn.extend({
  85                                
  86          startUp:function( obj, wrapper ) {
  87              seft = this;
  88  
  89              this.navigatorItems.each( function(index, item ){
  90                  $(item).click( function(){
  91                      seft.jumping( index, true );
  92                      seft.setNavActive( index, item );                    
  93                  } );
  94                  $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
  95              })
  96              this.registerWheelHandler( this.navigatorOuter, this );
  97              this.setNavActive(this.currentNo );
  98              
  99              if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
 100                  this.registerButtonsControl( 'click', this.settings.buttons, this );
 101  
 102              }
 103              if( this.settings.auto ) 
 104              this.play( this.settings.interval,'next', true );
 105              
 106              return this;
 107          },
 108          onComplete:function(){
 109              setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
 110          },
 111          preLoadImage:function(  callback ){
 112              var self = this;
 113              var images = this.wrapper.find( 'img' );
 114      
 115              var count = 0;
 116              images.each( function(index,image){ 
 117                  if( !image.complete ){                  
 118                      image.onload =function(){
 119                          count++;
 120                          if( count >= images.length ){
 121                              self.onComplete();
 122                          }
 123                      }
 124                      image.onerror =function(){ 
 125                          count++;
 126                          if( count >= images.length ){
 127                              self.onComplete();
 128                          }    
 129                      }
 130                  }else {
 131                      count++;
 132                      if( count >= images.length ){
 133                          self.onComplete();
 134                      }    
 135                  }
 136              } );
 137          },
 138          navivationAnimate:function( currentIndex ) { 
 139              if (currentIndex <= this.settings.startItem 
 140                  || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
 141                      this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
 142                      if (this.settings.startItem < 0) this.settings.startItem = 0;
 143                      if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
 144                          this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
 145                      }
 146              }        
 147              this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
 148                                                  {duration:500, easing:'easeInOutQuad'} );    
 149          },
 150          setNavActive:function( index, item ){
 151              if( (this.navigatorItems) ){ 
 152                  this.navigatorItems.removeClass( 'active' );
 153                  $(this.navigatorItems.get(index)).addClass( 'active' );    
 154                  this.navivationAnimate( this.currentNo );    
 155              }
 156          },
 157          __getPositionMode:function( position ){
 158              if(    position  == 'horizontal' ){
 159                  return ['left', this.settings.navigatorWidth];
 160              }
 161              return ['top', this.settings.navigatorHeight];
 162          },
 163          __getDirectionMode:function(){
 164              switch( this.settings.direction ){
 165                  case 'opacity': this.maxSize=0; return ['opacity','opacity'];
 166                  default: this.maxSize=this.maxWidth; return ['left','width'];
 167              }
 168          },
 169          registerWheelHandler:function( element, obj ){ 
 170               element.bind('mousewheel', function(event, delta ) {
 171                  var dir = delta > 0 ? 'Up' : 'Down',
 172                      vel = Math.abs(delta);
 173                  if( delta > 0 ){
 174                      obj.previous( true );
 175                  } else {
 176                      obj.next( true );
 177                  }
 178                  return false;
 179              });
 180          },
 181          registerButtonsControl:function( eventHandler, objects, self ){ 
 182              for( var action in objects ){ 
 183                  switch (action.toString() ){
 184                      case 'next':
 185                          objects[action].click( function() { self.next( true) } );
 186                          break;
 187                      case 'previous':
 188                          objects[action].click( function() { self.previous( true) } );
 189                          break;
 190                  }
 191              }
 192              return this;    
 193          },
 194          onProcessing:function( manual, start, end ){             
 195              this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
 196              this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);                
 197              return this;
 198          },
 199          finishFx:function( manual ){
 200              if( manual ) this.stop();
 201              if( manual && this.settings.auto ){ 
 202                  this.play( this.settings.interval,'next', true );
 203              }        
 204              this.setNavActive( this.currentNo );    
 205          },
 206          getObjectDirection:function( start, end ){
 207              return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");    
 208          },
 209          fxStart:function( index, obj, currentObj ){
 210                  if( this.settings.direction == 'opacity' ) { 
 211                      $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
 212                      $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
 213                  }else {
 214                      this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
 215                  }
 216              return this;
 217          },
 218          jumping:function( no, manual ){
 219              this.stop(); 
 220              if( this.currentNo == no ) return;        
 221               var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
 222              this.onProcessing( null, manual, 0, this.maxSize )
 223                  .fxStart( no, obj, this )
 224                  .finishFx( manual );    
 225                  this.currentNo  = no;
 226          },
 227          next:function( manual , item){
 228  
 229              this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);    
 230              this.onProcessing( item, manual, 0, this.maxSize )
 231                  .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
 232                  .finishFx( manual );
 233          },
 234          previous:function( manual, item ){
 235              this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
 236              this.onProcessing( item, manual )
 237                  .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
 238                  .finishFx( manual    );            
 239          },
 240          play:function( delay, direction, wait ){    
 241              this.stop(); 
 242              if(!wait){ this[direction](false); }
 243              var self  = this;
 244              this.isRun = setTimeout(function() { self[direction](true); }, delay);
 245          },
 246          stop:function(){ 
 247              if (this.isRun == null) return;
 248              clearTimeout(this.isRun);
 249              this.isRun = null; 
 250          }
 251      })
 252  })(jQuery)