Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/07/2011, 06:05
lockalt
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 9 meses
Puntos: 0
Información Respuesta: jQuery - Easy Slider 1.7

Al final lo conseguí no se si será correcto o no, pero funcionar funciona.

Esto solo sirve para usar con el enlace de arriba, con la demo de easy slider 1.7 .
Lo que hace esta modificación es, una vez pulsados los botones de next o prev después de la pausa seguirá automáticamente, con el slide, hacia esa dirección.

Solo tenéis que substituir el código del archivo easyslider1.7.j.s por este, todo lo demás funciona igual que en el tutorial.

Espero a alguien le sirva ;)


Código Javascript:
Ver original
  1. (function($) {
  2.  
  3.     $.fn.easySlider = function(options){
  4.      
  5.         // default configuration properties
  6.         var defaults = {           
  7.             prevId:         'prevBtn',
  8.             prevText:       'Previous',
  9.             nextId:         'nextBtn', 
  10.             nextText:       'Next',
  11.             controlsShow:   true,
  12.             controlsBefore: '',
  13.             controlsAfter:  '',
  14.             controlsFade:   true,
  15.             firstId:        'firstBtn',
  16.             firstText:      'First',
  17.             firstShow:      false,
  18.             lastId:         'lastBtn', 
  19.             lastText:       'Last',
  20.             lastShow:       false,             
  21.             vertical:       false,
  22.             speed:          1000,
  23.             auto:           true,
  24.             pause:          1000,
  25.             continuous:     true,
  26.             numeric:        false,
  27.             numericId:      'controls'
  28.         };
  29.        
  30.         var options = $.extend(defaults, options);  
  31.                
  32.                
  33.                
  34.         this.each(function() {  
  35.             var obj = $(this);             
  36.             var s = $("li", obj).length;
  37.             var w = $("li", obj).width();
  38.             var h = $("li", obj).height();
  39.             var clickable = true;
  40.             obj.width(w);
  41.             obj.height(h);
  42.             obj.css("overflow","hidden");
  43.             var ts = s-1;
  44.             var t = 0;
  45.             $("ul", obj).css('width',s*w);         
  46.            
  47.            
  48.            
  49.             if(options.continuous){
  50.                 $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
  51.                 $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
  52.                 $("ul", obj).css('width',(s+1)*w);
  53.  
  54.             };             
  55.            
  56.             if(!options.vertical) $("li", obj).css('float','left');
  57.                                
  58.             if(options.controlsShow){
  59.                 var html = options.controlsBefore;             
  60.                 if(options.numeric){
  61.                     html += '<ol id="'+ options.numericId +'"></ol>';
  62.                 } else {
  63.                     if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
  64.                     html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'  </a></span>';
  65.                     html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
  66.                        
  67.                 };
  68.                
  69.                 html += options.controlsAfter;                     
  70.                 $(obj).after(html);                                    
  71.             };
  72.            
  73.             if(options.numeric){                                   
  74.                 for(var i=0;i<s;i++){                      
  75.                     $(document.createElement("li"))
  76.                         .attr('id',options.numericId + (i+1))
  77.                         .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
  78.                         .appendTo($("#"+ options.numericId))
  79.                         .click(function(){                         
  80.                             animate($("a",$(this)).attr('rel'),true);
  81.                         });                                                
  82.                 };                         
  83.             } else {
  84.                 $("a","#"+options.nextId).click(function(){    
  85.                     animate("next",false); //continuo
  86.                     //animate("next",true);
  87.                 });
  88.                 $("a","#"+options.prevId).click(function(){    
  89.                     animate("prev",false);
  90.                 });
  91.                                
  92.             };
  93.            
  94.             function setCurrent(i){
  95.                 i = parseInt(i)+1;
  96.                 $("li", "#" + options.numericId).removeClass("current");
  97.                 $("li#" + options.numericId + i).addClass("current");
  98.             };
  99.            
  100.             function adjust(){
  101.                 if(t>ts) t=0;      
  102.                 if(t<0) t=ts;  
  103.                 if(!options.vertical) {
  104.                     $("ul",obj).css("margin-left",(t*w*-1));
  105.                 } else {
  106.                     $("ul",obj).css("margin-left",(t*h*-1));
  107.                 }
  108.                 clickable = true;
  109.                 if(options.numeric) setCurrent(t);
  110.             };
  111.            
  112.             function animate(dir,clicked){
  113.                 if (clickable){
  114.                     clickable = false;
  115.                     var ot = t;            
  116.                     switch(dir){
  117.                         case "next":
  118.                             t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                      
  119.                             break;
  120.                         case "prev":
  121.                             t = (t>=0) ? (options.continuous ? t-1 : ts) : t-1;                    
  122.                             break;
  123.                         //  t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
  124.                         //  break;
  125.                     }; 
  126.                     var diff = Math.abs(ot-t);
  127.                     var speed = diff*options.speed;                    
  128.                     if(!options.vertical) {
  129.                         p = (t*w*-1);
  130.                         $("ul",obj).animate(
  131.                             { marginLeft: p },
  132.                             { queue:false, duration:speed, complete:adjust }
  133.                         );             
  134.                     } else {
  135.                         p = (t*h*-1);
  136.                         $("ul",obj).animate(
  137.                             { marginTop: p },
  138.                             { queue:false, duration:speed, complete:adjust }
  139.                         );                 
  140.                     };
  141.                    
  142.                     if(!options.continuous && options.controlsFade){                   
  143.                         if(t==ts){
  144.                             $("a","#"+options.nextId).hide();
  145.                             $("a","#"+options.lastId).hide();
  146.                             $("a","#"+options.prevId).hide();
  147.                             $("a","#"+options.firstId).hide();
  148.                         } else {
  149.                             $("a","#"+options.nextId).show();
  150.                             $("a","#"+options.lastId).show();
  151.                             $("a","#"+options.prevId).show();
  152.                             $("a","#"+options.firstId).show();                 
  153.                         };
  154.                     };             
  155.                    
  156.                     if(clicked) clearTimeout(timeout);
  157.                     if(options.auto && dir=="next" && !clicked){;
  158.                         timeout = setTimeout(function(){
  159.                             animate("next",false);
  160.                         },diff*options.speed+options.pause);
  161.                     };
  162.                     if(options.auto && dir=="prev" && !clicked){;
  163.                         timeout = setTimeout(function(){
  164.                             animate("prev",false);
  165.                         },diff*options.speed+options.pause);
  166.                     };
  167.            
  168.                 };
  169.                
  170.             };
  171.             // init
  172.             var timeout;
  173.             if(options.auto){;
  174.                 timeout = setTimeout(function(){
  175.                     animate("next",false);
  176.                     animate("prev",false);
  177.                 },options.pause);
  178.             };     
  179.         });
  180.     };
  181. })(jQuery);