Comunidad de diseño web y desarrollo en internet online

Easy Slider - ¿Cómo lograr saltar de la imagen 4 a la 1?

Citar            
MensajeEscrito el 05 Ago 2011 05:15 pm
Easy Slider - ¿Cómo lograr saltar de la imagen 4 a la 1 usando la navegación numérica?

Buenas días gente:

Actualmente tengo la navegación numérica y quisiera navegar de la imagen 4 a la 1 haciendo un salto (sin que se muestre el barrido mostrando las imágenes 3 y 2).

Creo que el archivo a modifica es easySlider1.7.js que contiene lo siguiente:

Código Javascript :

/*
 *    Easy Slider 1.7 - jQuery plugin
 *   written by Alen Grakalic   
 *   http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *   Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *   Dual licensed under the MIT (MIT-LICENSE.txt)
 *   and GPL (GPL-LICENSE.txt) licenses.
 *
 *   Built for jQuery library
 *   http://jquery.com
 *
 */
 
/*
 *   markup example for $("#slider").easySlider();
 *   
 *    <div id="slider">
 *      <ul>
 *         <li><img src="images/01.jpg" alt="" /></li>
 *         <li><img src="images/02.jpg" alt="" /></li>
 *         <li><img src="images/03.jpg" alt="" /></li>
 *         <li><img src="images/04.jpg" alt="" /></li>
 *         <li><img src="images/05.jpg" alt="" /></li>
 *      </ul>
 *   </div>
 *
 */

(function($) {

   $.fn.easySlider = function(options){
     
      // default configuration properties
      var defaults = {         
         prevId:       'prevBtn',
         prevText:       'Previous',
         nextId:       'nextBtn',   
         nextText:       'Next',
         controlsShow:   true,
         controlsBefore:   '',
         controlsAfter:   '',   
         controlsFade:   true,
         firstId:       'firstBtn',
         firstText:       'First',
         firstShow:      false,
         lastId:       'lastBtn',   
         lastText:       'Last',
         lastShow:      false,            
         vertical:      false,
         speed:          800,
         auto:         false,
         pause:         2000,
         continuous:      false, 
         numeric:       false,
         numericId:       'controls'
      }; 
      
      var options = $.extend(defaults, options);  
            
      this.each(function() {  
         var obj = $(this);             
         var s = $("li", obj).length;
         var w = $("li", obj).width(); 
         var h = $("li", obj).height(); 
         var clickable = true;
         obj.width(w); 
         obj.height(h); 
         obj.css("overflow","hidden");
         var ts = s-1;
         var t = 0;
         $("ul", obj).css('width',s*w);         
         
         if(options.continuous){
            $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
            $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
            $("ul", obj).css('width',(s+1)*w);
         };            
         
         if(!options.vertical) $("li", obj).css('float','left');
                        
         if(options.controlsShow){
            var html = options.controlsBefore;            
            if(options.numeric){
               html += '<ol id="'+ options.numericId +'"></ol>';
            } else {
               if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
               html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
               html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
               if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';            
            };
            
            html += options.controlsAfter;                  
            $(obj).after(html);                              
         };
         
         if(options.numeric){                           
            for(var i=0;i<s;i++){                  
               $(document.createElement("li"))
                  .attr('id',options.numericId + (i+1))
                  .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
                  .appendTo($("#"+ options.numericId))
                  .click(function(){                     
                     animate($("a",$(this)).attr('rel'),true);
                  });                                     
            };                     
         } else {
            $("a","#"+options.nextId).click(function(){      
               animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){      
               animate("prev",true);            
            });   
            $("a","#"+options.firstId).click(function(){      
               animate("first",true);
            });            
            $("a","#"+options.lastId).click(function(){      
               animate("last",true);            
            });            
         };
         
         function setCurrent(i){
            i = parseInt(i)+1;
            $("li", "#" + options.numericId).removeClass("current");
            $("li#" + options.numericId + i).addClass("current");
         };
         
         function adjust(){
            if(t>ts) t=0;      
            if(t<0) t=ts;   
            if(!options.vertical) {
               $("ul",obj).css("margin-left",(t*w*-1));
            } else {
               $("ul",obj).css("margin-left",(t*h*-1));
            }
            clickable = true;
            if(options.numeric) setCurrent(t);
         };
         
         function animate(dir,clicked){
            if (clickable){
               clickable = false;
               var ot = t;            
               switch(dir){
                  case "next":
                     t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                  
                     break; 
                  case "prev":
                     t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                     break; 
                  case "first":
                     t = 0;
                     break; 
                  case "last":
                     t = ts;
                     break; 
                  default:
                     t = parseInt(dir);
                     break; 
               };   
               var diff = Math.abs(ot-t);
               var speed = diff*options.speed;                  
               if(!options.vertical) {
                  p = (t*w*-1);
                  $("ul",obj).animate(
                     { marginLeft: p }, 
                     { queue:false, duration:speed, complete:adjust }
                  );            
               } else {
                  p = (t*h*-1);
                  $("ul",obj).animate(
                     { marginTop: p }, 
                     { queue:false, duration:speed, complete:adjust }
                  );               
               };
               
               if(!options.continuous && options.controlsFade){               
                  if(t==ts){
                     $("a","#"+options.nextId).hide();
                     $("a","#"+options.lastId).hide();
                  } else {
                     $("a","#"+options.nextId).show();
                     $("a","#"+options.lastId).show();               
                  };
                  if(t==0){
                     $("a","#"+options.prevId).hide();
                     $("a","#"+options.firstId).hide();
                  } else {
                     $("a","#"+options.prevId).show();
                     $("a","#"+options.firstId).show();
                  };               
               };            
               
               if(clicked) clearTimeout(timeout);
               if(options.auto && dir=="next" && !clicked){;
                  timeout = setTimeout(function(){
                     animate("next",false);
                  },diff*options.speed+options.pause);
               };
         
            };
            
         };
         // init
         var timeout;
         if(options.auto){;
            timeout = setTimeout(function(){
               animate("next",false);
            },options.pause);
         };      
         
         if(options.numeric) setCurrent(0);
      
         if(!options.continuous && options.controlsFade){               
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();            
         };            
         
      });
     
   };

})(jQuery);


Gracias por su atención y oportuna respuesta.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 05 Ago 2011 07:31 pm

Código Javascript :

continuous:      true, 

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 08 Ago 2011 03:40 pm

DriverOp escribió:

Código Javascript :

continuous:      true, 


Buenos días @DriverOp:

No se trata de que sea continuo. Pongo otro ejemplo:

Supongamos que estoy en el slide 2 y quiero desplazarme al slide 4, yo quiero que al hacer clic sobre el botoncito 4, se haga el barrido hacia el slide 4 pero sin mostrar el slide 3.

¿Es claro lo que necesito?

Gracias por responderme.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 08 Ago 2011 05:41 pm
En el primer mensaje no quedó claro lo que querías.

Pues no, EasySlider no tiene esa característica. Tendrás que programarla tú. Ya sea reescribiendo tu propio slider o echando mano al código de EasySlider.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 08 Ago 2011 06:14 pm

DriverOp escribió:

En el primer mensaje no quedó claro lo que querías.

Pues no, EasySlider no tiene esa característica. Tendrás que programarla tú. Ya sea reescribiendo tu propio slider o echando mano al código de EasySlider.


Saludos @DriverOp:

Eso es lo que quiero saber... ¿Cómo lo edito de tal forma que funcione de esa manera?

Gracias por responderme. ¡Feliz tarde!

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 09 Ago 2011 01:13 am
Problema sin ninguna causa practica, pero aun asi interesante de resolver. Este codigo lo tiene que colocar luego del codigo para el slider.

Código Javascript :

$("#controls a").click(function(){
   var r = Number(this.rel),
      c = Number($("#controls .current a").attr("rel")),
      g = $("#slider ul img");   
   if(r==c)return false;
   g.filter("[ori]").each(function(){this.src = $(this).attr("ori")});
   var f = c > r ? 1 : -1,   
      i = g.eq(c+1).attr("src")
      t = g.eq(r+f+1);
   $(t).attr("ori",t.src)
   t[0].src = i;   
   $("#slider > ul").css("margin-left",function(){
      return $(this).parent().width() * (r+f) * -1 
   })   
})

Con eso ya queda. Aunque si quiere que la velocidad sea pareja solo modifique una linea en el codigo del plugin EasySlider, la linea que dice:

Código Javascript :

 var speed = diff*options.speed; 

remplazela por:

Código Javascript :

 var speed = options.speed; 


:cool:

Por ViejoIvan

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Ago 2011 05:29 pm
Saludos @ViejoIva:

En primer lugar te agradezco por responderme.

Realicé los cambios que sugeriste:

  • Incluisión de código entre las etiquetas <head></head>.
  • Modificación de código en el archivo easySlider1.7.js.


Noto el cambio en la velocidad del slide, pero cuando paso de la imagen 2 a la 4, o de la 3 a la 5, o de la 5 a la 2, el sistema continúa mostrando las imágenes que hay entre las dos posiciones mencionadas.

Necesito que si estoy posicionado en la imagen 2 y hago clic en la 4, se cambie la posición de la imagen 4 haciendo que sea la siguiente a la 2.

Poniendo otro ejemplo, no quiero que si tengo un total de 10 imágenes en el slide y estoy posicionado en la imagen 1 y quiero ir directamente a la 10, yo no tenga que ver el desplazamiento de imágenes hasta la imagen 10.

Gracias por tu atención y feliz día.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 10 Ago 2011 09:27 pm
Saludos @ViejoIvan:

Si, funciona muuuy parecido a lo que necesito, sin embargo cuando hago clic sobre los botones de control, se muestra la imagen siguiente en un 'flasheo' de 1 segundo, desaparece y luego si avanza hacia la imagen.

Adjunto vídeo en formato SWF.

¿Como puedo mejorar el efecto?

Muchas gracias y feliz tarde.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 10 Ago 2011 09:30 pm
Parece que en el vídeo que les dejé no se aprecia el 'flasheo' de la imagen.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 10 Ago 2011 10:00 pm
El slide no se comporta correctamente cuando navego en el orden de las siguientes posiciones de imágenes (en total son 7):

1 -> 7 -> 1 -> 2

Adjunto vídeo en formato SWF.

Gracias de antemano por sus respuestas.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 10 Ago 2011 11:32 pm

ViejoIvan escribió:

Problema sin ninguna causa practica, pero aun asi interesante de resolver. Este codigo lo tiene que colocar luego del codigo para el slider.

Código Javascript :

$("#controls a").click(function(){
   var r = Number(this.rel),
      c = Number($("#controls .current a").attr("rel")),
      g = $("#slider ul img");   
   if(r==c)return false;
   g.filter("[ori]").each(function(){this.src = $(this).attr("ori")});
   var f = c > r ? 1 : -1,   
      i = g.eq(c+1).attr("src")
      t = g.eq(r+f+1);
   $(t).attr("ori",t.src)
   t[0].src = i;   
   $("#slider > ul").css("margin-left",function(){
      return $(this).parent().width() * (r+f) * -1 
   })   
})

Con eso ya queda. Aunque si quiere que la velocidad sea pareja solo modifique una linea en el codigo del plugin EasySlider, la linea que dice:

Código Javascript :

 var speed = diff*options.speed; 

remplazela por:

Código Javascript :

 var speed = options.speed; 


:cool:


¿Cuál es el propósito de la variable 't'?
Ver post anterior para ver el error que se presenta cuando se sigue la navegación en determinado orden.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 11 Ago 2011 09:48 pm
La variable t es la imagen consiguiente a la imagen a la que se acabo de clicker y la cual cambia de imagen por unos pocos segundos creando la ilusión de que las dos imagenes están adjuntas.

Si esta teniendo problemas con el slider mejor haga uno desde 0 que haga exactamente lo que quiere, es relativamente fácil con la ayuda de jQuery.

Por ViejoIvan

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Ago 2011 11:36 pm
Bueno, para no complicar mucho mi petición, también me sirve poder aumentar la velocidad de transición e imágenes sólo cuando hago clic en los botones de posición.

¿Cómo lo hago? ¿Qué debo modificar?

Nuevamente, gracias por sus respuestas.

Por merlyn333

18 de clabLevel



Genero:Masculino  

Bogota

firefox
Citar            
MensajeEscrito el 24 Ago 2011 02:09 am
Hola, quisiera saber si hay alguna forma en que no aparezcan los números, sólo el cuadrado.

gracias y saludos

Por anita04

0 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.