Shuffle an array of images jquery

Question

i would like to shuffle an array of images with jquery.The problem is that 'till now i did something which doesnt show images ...it shows only path for them.Where i was wrong?

Code here:

HTML:

<div id="array" class="thirdcanvas"></div>
<button class="array">Shuffle</button>

JS:

jQuery(function($){

$(document).ready( function() 
{ 
    $('#array').shuffle(); 
}); 

    var arr = new Array("images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/c.png", "images/alfabet/e.png", "images/alfabet/f.png");
    $('#array').text(arr.join(", "));
    $('button.array').click(function(){
        arr = $.shuffle(arr);
        $('#array').text(arr.join(", "));

    });
});

var image6 = new Image();
   image6.src = "images/alfabet/a.png";
   var image7 = new Image();
   image7.src = "images/alfabet/b.png";
   var image8 = new Image();
   image8.src = "images/alfabet/c.png";
   var image9 = new Image();
   image9.src = "images/alfabet/e.png";
   var image10 = new Image();
   image10.src = "images/alfabet/f.png";



(function($){

    $.fn.shuffle = function() {
        return this.each(function(){
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    };

    $.shuffle = function(arr) {
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    };

})(jQuery);

Answer 1

You never create <img> elements, that's why you only see the URL.
Here's the code you should use:

// your bunch of pictures
var arr = new Array(
    "http://placehold.it/100x100", 
    "http://placehold.it/120x100", 
    "http://placehold.it/140x100", 
    "http://placehold.it/160x100", 
    "http://placehold.it/180x100"
);

// Refresh pictures
function refreshPictures() {
    // Create new DOM element    
    var pictures = $('<ul id="pictures"></ul>');
    for(var i=0, n=arr.length; i<n; i++) {
        pictures.append('<li><img src="'+arr[i]+'"/></li>');
    }
    // Replace current element by new one
    $('#pictures').replaceWith(pictures);
}

// Add click listener on #randomize button
$('#randomize').on('click', function(){
    arr = arr.shuffle();
    refreshPictures();
});

// Initialize pictures
refreshPictures();

// Add shuffle() function to Array prototype
Array.prototype.shuffle = function() {
    for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
    return this;
};

ul {
    list-style: none;
    padding: 0;
}
li {
    float: left;
    margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="pictures"></ul>
<button id="randomize">Shuffle</button>

Answer 2

It looks like you have all the parts you need there. We just need to take the image links and create <img> elements from them, then append them to the <div>. The shuffle function can then be called directly on the <div>, to shuffle the images in place, without having to use the original array again.

Something like:

$(document).ready( function() { 
    var arr = new Array("http://placehold.it/50x50&text=a", "ihttp://placehold.it/50x50&text=b", "http://placehold.it/50x50&text=c", "http://placehold.it/50x50&text=d", "http://placehold.it/50x50&text=e");

    for(var i=0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      $('#array').append(img);
    }

    $('button.array').click(function(){
      $('#array').shuffle();
    });
});

(function($){

    $.fn.shuffle = function() {
        return this.each(function(){
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    };

    $.shuffle = function(arr) {
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    };

})(jQuery);

jsfiddle: http://jsfiddle.net/ygaw2/

This uses a for loop to iterate across the array of links, so the array can contain as many links as required.

Answer 3

This code goes in your click listener and creates images with the srcs from the array. You can then remove your new Image()s. This is not an efficient implementation, but it's fine for a small page. It involves the minimum changes to your original code.

$('button.array').click(function () {
    arr = $.shuffle(arr);
    $('#array').text(arr.join(", "));

    // Added:
    $(".thirdcanvas").html(""); // empties container
    for (var i=0; i<arr.length ;i++){
        // Add an image
        $(".thirdcanvas").append($("<img src='" + arr[i] + "'>"));
    }

});

Answer 4

Try

jQuery(function ($) {

    var arr = new Array("//placehold.it/32/ff0000.png", "//placehold.it/32/00ff00.png", "//placehold.it/32/0000ff.png", "//placehold.it/32/ff00ff.png", "//placehold.it/32/00ffff.png");

    $.each($.shuffle(arr), function (_, src) {
        $('<img />', {
            src: src
        }).appendTo('#array')
    })
    $('button.array').click(function () {
        $('#array').shuffle()
    });
});

(function ($) {

    $.fn.shuffle = function () {
        var _self = this,
            children = $.shuffle(this.children().get());
        $.each(children, function () {
            _self.append(this)
        })
        return this;
    };

    $.shuffle = function (arr) {
        for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    };

})(jQuery);

Demo: Fiddle