Foros del Web » Programando para Internet » Jquery »

jQuery - Easy Slider 1.7

Estas en el tema de jQuery - Easy Slider 1.7 en el foro de Jquery en Foros del Web. Hola a ver si me podeis ayudar. Estoy utilizando el plugin jQuerry - Easy Slider 1.7: [URL="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider"]http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider[/URL] todo me funciona a la perfección, pero me ...
  #1 (permalink)  
Antiguo 04/07/2011, 17:01
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 8 meses
Puntos: 0
Pregunta jQuery - Easy Slider 1.7

Hola a ver si me podeis ayudar.

Estoy utilizando el plugin jQuerry - Easy Slider 1.7: [URL="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider"]http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider[/URL] todo me funciona a la perfección, pero me gustaría que al hacer click en los botones next o prev siguiera la animación auto.

Se que el parametro que me controla esto es:
Código:
auto:true,
pero al dar a uno de los botones lo cambia a false, se os ocurre alguna manera para que no lo cambiara o simplemente lo volviera a cambiar a true?

Busque y realize mil cosas con mi pobre de js, pero no hay manera :(

Gracias por avanzado!
  #2 (permalink)  
Antiguo 05/07/2011, 06:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 8 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);
  #3 (permalink)  
Antiguo 05/07/2011, 09:36
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: jQuery - Easy Slider 1.7

Pues funciona así la solución anterior, se va acelerando...

Al final he modificado este: http://css-tricks.com/examples/AnythingSlider/

Ahora si ningún problema al clickar en las flechas sigue el slide automático.

Etiquetas: easy, easyslider, javascript, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:06.