bradtrivers

jQuery Easing Slider

Apr 11th, 2012
159
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. jQuery.noConflict();
  2.  
  3. jQuery(window).load(function(){
  4.     var $featured_content = jQuery('#featured'),
  5.         et_featured_slider_pause = jQuery("meta[name=et_featured_slider_pause]").attr('content'),
  6.         et_featured_slider_auto = jQuery("meta[name=et_featured_slider_auto]").attr('content'),
  7.         et_featured_auto_speed = jQuery("meta[name=et_featured_auto_speed]").attr('content');
  8.  
  9.     if ($featured_content.length) {
  10.         var $featured_slides = $featured_content.find('.slide').show(),
  11.             slides_pos = [],
  12.             slides_zindex = [],
  13.             active_slide_width = 500,
  14.             small_slide_width = 250,
  15.             slide_margin = 16,
  16.             featured_animation = 'easeInOutQuad', //'easeInOutQuad','easeInOutQuint', 'easeInOutQuart'
  17.             et_animation_running = false,
  18.             last_slide = false,
  19.             pause_scroll = false,
  20.             top_slide_pos,
  21.             left_slide_pos,
  22.             slide_opacity;
  23.        
  24.         $featured_content.css( 'backgroundImage', 'none' );
  25.        
  26.         $featured_slides.each(function(index, domEle){
  27.             var $this_slide = jQuery(domEle);
  28.            
  29.             top_slide_pos = 82;
  30.             slide_opacity = 0.3;
  31.            
  32.             if ( index === 0 ) {
  33.                 top_slide_pos = 0;
  34.                 slide_opacity = 1;
  35.                 left_slide_pos = 230;
  36.             }
  37.             if ( index === 1 ) left_slide_pos = 620;
  38.             if ( index === 2 ) left_slide_pos = 90;
  39.             if ( index > 2 ) {
  40.                 if ( index % 2 === 1 ) left_slide_pos = slides_pos[index-2].left + small_slide_width + slide_margin;
  41.                 else left_slide_pos = slides_pos[index-2].left - small_slide_width - slide_margin;
  42.             }
  43.            
  44.             if ( index !== 0 ) {
  45.                 $this_slide.find('img').attr({
  46.                     width: '250',
  47.                     height: '169'
  48.                 });
  49.             }
  50.                            
  51.             slides_pos[index] = {
  52.                 width: $this_slide.width(),
  53.                 top: top_slide_pos,
  54.                 left: left_slide_pos,
  55.                 opacity: slide_opacity
  56.             };
  57.            
  58.             $this_slide.css('zIndex',$featured_slides.length-index);
  59.             slides_zindex[index] = $this_slide.css('zIndex');
  60.            
  61.             $this_slide.animate(slides_pos[index],100);
  62.             jQuery(domEle).data('slide_pos',index);
  63.         });
  64.        
  65.         jQuery('a.nextslide').live('click',function(event){
  66.             event.preventDefault();
  67.             if (!et_animation_running) rotate_slide('next');
  68.             if ( typeof(et_auto_animation) !== 'undefined' ) clearInterval(et_auto_animation);
  69.         });
  70.        
  71.         jQuery('a.prevslide').live('click',function(event){
  72.             event.preventDefault();
  73.             if (!et_animation_running) rotate_slide('prev');
  74.             if ( typeof(et_auto_animation) !== 'undefined' ) clearInterval(et_auto_animation);
  75.         });
  76.        
  77.         $featured_slides.hover(function(){
  78.             if ( !et_animation_running ) {
  79.                 if ( jQuery(this).hasClass('active') ){
  80.                     jQuery(this).find('.additional').stop(true, true).animate({'opacity':'show'},300);
  81.                 }
  82.             }
  83.             if ( et_featured_slider_pause == 1 ) pause_scroll = true;
  84.         },function(){
  85.             if ( !et_animation_running ) {
  86.                 jQuery(this).find('.additional').stop(true, true).animate({'opacity':'hide'},300);
  87.             }
  88.             if ( et_featured_slider_pause == 1 ) pause_scroll = false;
  89.         });
  90.        
  91.         var et_mousex = 0,
  92.             et_mousey = 0,
  93.             featured_activeslide_x = $featured_content.find('.container').offset().left + 230,
  94.             featured_activeslide_y = $featured_content.find('.container').offset().top;
  95.        
  96.         jQuery(document).mousemove(function(e){
  97.             et_mousex = e.pageX;
  98.             et_mousey = e.pageY;
  99.         });
  100.          
  101.         function rotate_slide(direction){
  102.             $featured_slides.removeClass('active');
  103.                            
  104.             $featured_slides.each(function(index, domEle){
  105.                 var $this_slide = jQuery(domEle),
  106.                     next_slide_num = $this_slide.data('slide_pos');
  107.                
  108.                 et_animation_running = true;   
  109.                 last_slide = false;
  110.                
  111.                 $featured_slides.find('.additional').css('display','none');
  112.                
  113.                 if ( direction === 'next' ){
  114.                     if ( next_slide_num === 0 ) next_slide_num = 2;
  115.                     else if ( next_slide_num === 1 ) next_slide_num = 0;
  116.                     else if ( $featured_slides.length % 2 === 0 && next_slide_num === ( $featured_slides.length - 2 ) ) {
  117.                         next_slide_num = $featured_slides.length - 1;
  118.                     }
  119.                     else {
  120.                         if ( next_slide_num !== ($featured_slides.length - 1) ) {
  121.                             if ( next_slide_num % 2 === 0 )  next_slide_num = next_slide_num + 2;
  122.                             else next_slide_num = next_slide_num - 2;
  123.                         } else {
  124.                             if ( $featured_slides.length % 2 === 0 ) {
  125.                                 if ( next_slide_num % 2 === 0 )  next_slide_num = next_slide_num + 2;
  126.                                 else next_slide_num = next_slide_num - 2;
  127.                             }
  128.                             else {
  129.                                 next_slide_num = $featured_slides.length - 2;
  130.                                 last_slide = true;
  131.                             }
  132.                         }
  133.                     }
  134.                 } else {
  135.                     if ( next_slide_num === 0 ) next_slide_num = 1;
  136.                     else if ( $featured_slides.length % 2 === 0 && next_slide_num === ( $featured_slides.length - 1 ) ) {
  137.                         next_slide_num = $featured_slides.length - 2;
  138.                     }
  139.                     else {
  140.                         if ( $featured_slides.length % 2 === 0 ) {
  141.                             if ( next_slide_num % 2 === 0 ) next_slide_num = next_slide_num - 2;
  142.                             else next_slide_num = next_slide_num + 2;
  143.                         } else {
  144.                             if ( next_slide_num !== ($featured_slides.length - 2) ) {
  145.                                 if ( next_slide_num % 2 === 0 ) next_slide_num = next_slide_num - 2;
  146.                                 else next_slide_num = next_slide_num + 2;
  147.                             } else {
  148.                                 next_slide_num = $featured_slides.length-1;
  149.                                 last_slide = true;
  150.                             }
  151.                         }
  152.                     }
  153.                 }
  154.                            
  155.                 if ( last_slide ) {
  156.                     $this_slide.css('left',slides_pos[next_slide_num].left);
  157.                 }
  158.                                    
  159.                 $this_slide.stop(true, true).animate(slides_pos[next_slide_num],600,featured_animation,function(){
  160.                     if ( index === $featured_slides.length - 1 ) et_animation_running = false;
  161.                                    
  162.                     if ( !et_animation_running ) {
  163.                         if ( et_mousex > featured_activeslide_x && et_mousex < (featured_activeslide_x + 500) && et_mousey > featured_activeslide_y && et_mousey < (featured_activeslide_y + 335) ){
  164.                             if ( next_slide_num === 0 ) $featured_content.find('.slide').filter(':eq('+($featured_slides.length - 1)+')').find('.additional').stop(true, true).animate({'opacity':'show'},300);
  165.                             else $featured_content.find('.active .additional').stop(true, true).animate({'opacity':'show'},300);
  166.                            
  167.                             if ( et_featured_slider_pause == 1 ) pause_scroll = true;
  168.                         }
  169.                     }
  170.                 });
  171.                 if ( next_slide_num != 0 ) {
  172.                     $this_slide.find('img').stop(true, true).animate({'width':'250px','height':'169px'},600,featured_animation);
  173.                 }
  174.                 else {
  175.                     $this_slide.find('img').stop(true, true).animate({'width':'500px','height':'335px'},600,featured_animation,function(){
  176.                         $this_slide.addClass('active');
  177.                     });
  178.                 }
  179.                    
  180.                 setTimeout(function(){
  181.                     $this_slide.css({zIndex: slides_zindex[next_slide_num]});
  182.                 },300);
  183.                
  184.                 $this_slide.data('slide_pos',next_slide_num);
  185.             });
  186.         }
  187.        
  188.         if ( et_featured_slider_auto == 1 ) {
  189.             et_auto_animation = setInterval(function(){
  190.                 if ( !pause_scroll ) rotate_slide('next');
  191.             }, et_featured_auto_speed);
  192.         }
  193.     }
  194.  
  195. }
Advertisement
Add Comment
Please, Sign In to add comment