Foros del Web » Programando para Internet » Jquery »

¿Cómo lograr efecto random Jquery?

Estas en el tema de ¿Cómo lograr efecto random Jquery? en el foro de Jquery en Foros del Web. Hola amigos, Antes que nada muchas gracias por entrar a darme una mano. Los molesto porque tengo un problema con un slider en jquery. Necesito ...
  #1 (permalink)  
Antiguo 01/10/2010, 19:43
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 13 años, 7 meses
Puntos: 0
¿Cómo lograr efecto random Jquery?

Hola amigos,

Antes que nada muchas gracias por entrar a darme una mano.

Los molesto porque tengo un problema con un slider en jquery. Necesito que los slides aparezcan no en orden secuencial sino aleatorio y en verdad no sé como hacerlo. Googlié muchísimo pero no encontré ninguna solución. Si he dado con algún código pero no he podido implementarlo. Espero me puedan dar una mano.

El slider es el "Create Beautiful jQuery slider" de Dream CSS

Cita:
<script type=" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
Buscando he encontrado código como éste pero no sé en que parte del código de arriba implementarlo.

Código:
var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
     startSlide:rand
});
Como se darán cuenta no soy muy ducho con estas cosas, seguramente alguno podrá señalarme lo que está mal.

¡Muchas gracias!
  #2 (permalink)  
Antiguo 02/10/2010, 00:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 02/10/2010, 08:44
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: ¿Cómo lograr efecto random Jquery?

Yo tengo esto:
Código Javascript:
Ver original
  1. // random engine   
  2.     jQuery.jQueryRandom = 0;
  3.     jQuery.extend(jQuery.expr[":"], {
  4.         random: function(a, i, m, r) {
  5.             if (i == 0) {
  6.                 jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
  7.             };
  8.             return i == jQuery.jQueryRandom;
  9.         }
  10.     });

Y luego:
Código Javascript:
Ver original
  1. $("img:random");
  #4 (permalink)  
Antiguo 09/10/2010, 09:10
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: ¿Cómo lograr efecto random Jquery?

¡Gracias mayid!

Todavía no pude hacerlo andar, es algo particular el slider que cité arriba, como que el script no es del tipo clásico donde uno puede ir agregando funciones. Sigo intentando a ver si puede resolver algo.

¡Saludos!
  #5 (permalink)  
Antiguo 09/10/2010, 09:20
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: ¿Cómo lograr efecto random Jquery?

Ah! El codigo de arriba, que vos publicaste, es solo un fragmento. Tiene que haber más codigo en un archivo js. Lo tenes?
  #6 (permalink)  
Antiguo 09/10/2010, 09:38
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: ¿Cómo lograr efecto random Jquery?

¡Si, señor! Y veo la parte de random pero no sé como implementar dicho función en el código que puse arriba porque nunca vi un código así, sino otros del estilo que mencionaba antes, de esos que vas a agregándole funciones.

¡Gracias de nuevo mayid!

Código:
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}


$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();
 mc.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};
  #7 (permalink)  
Antiguo 09/10/2010, 11:10
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: ¿Cómo lograr efecto random Jquery?

Lo que tenes que buscar en un codigo así es la inserción de las imagenes. Por ejemplo, esta linea es una buena candidata a ser la que incluye las imagenes "en orden":

$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});

Ves? Es un bucle. Pero podría tratarse de un selector del tipo $("img")
  #8 (permalink)  
Antiguo 09/10/2010, 12:17
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: ¿Cómo lograr efecto random Jquery?

Ahh ok, es más difícil de lo que yo pensaba entonces. No tengo mucha idea como verás. Voy a ver de conseguir a algún programador que me de una mano para ver si puedo terminar con este tema que hace 10 días vengo dando vueltas.

¡Muchas gracias de nuevo por todo mayid!

Etiquetas: efecto, random
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:47.