Trying to randomise a jQuery content slider

Posted by alecrust on Stack Overflow See other posts from Stack Overflow or by alecrust
Published on 2010-04-09T10:26:14Z Indexed on 2010/05/18 4:30 UTC
Read the original article Hit count: 326

Filed under:

Hi everyone,

I'm using a very nice jQuery content slider called Easy Slider on my site that I downloaded from Css Globe.

The script is excellent and does just what I want - except I can't make it randomise the list, it always scrolls from left to right or right to left!

I'm far from good with JavaScript, so my attempts at solving this have been feeble. Although I'm sure it must be an easy fix!

If anyone wouldn't mind taking a glance over the script to see if they can spot what I need to change to make it random it would be greatly appreciated!

I've tried contacting the original plugin developer but have had no response yet. The comments on the Easy Slider page didn't bear much fruit either unfortunately.

I've pasted the script I'm using on my site below:

/*
 *  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
 *
 */

(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:   7000,
   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 = 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);

Many thanks again!

Alec

© Stack Overflow or respective owner

Related posts about JavaScript