Thursday, March 1, 2012

jQuery shuffle plugin for banner rotator

This is a useful plug in in which allows you to shuffle the banner images if you wat to show it randomly.

(function($){
    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
        return $(shuffled);
    };
})(jQuery);

How to use:
<script>  
 $(document).ready(function() {
    /*put this on top or before your rotator*/
    $('.slideshow img').shuffle(); 
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>



No comments:

Post a Comment