Randomly show images in array Jquery

I have an array with images and I want them to appear (fadeIn) in an existing div element in a random order. I need 19 pictures in total so some pictures should appear two or even three times. Does anyone know how to do this?

    </div>
    <script>
        var pictures = new Array(7);
        var counter = 0;
        $(document).ready(function() {
            // Images in array

            pictures[0] = new Image(50, 50);
            pictures[0].src = "../Spel in jQuery/img/bubbles/bom.png";
            pictures[1] = new Image(50, 50);
            pictures[1].src = "../Spel in jQuery/img/bubbles/green.png";
            pictures[2] = new Image(50, 50);
            pictures[2].src = "../Spel in jQuery/img/bubbles/red.png";
            pictures[3] = new Image(50, 50);
            pictures[3].src = "../Spel in jQuery/img/bubbles/yellow.png";
            pictures[4] = new Image(50, 50);
            pictures[4].src = "../Spel in jQuery/img/bubbles/orange.png";
            pictures[5] = new Image(50, 50);
            pictures[5].src = "../Spel in jQuery/img/bubbles/purple.png";
            pictures[6] = new Image(50, 50);
            pictures[6].src = "../Spel in jQuery/img/bubbles/blue.png";


            //Place images on screen with fadeIn effect.
            $(pictures).each(function(key, value) {

                var item = $("<img src='" + value.src + "' />").hide().fadeIn(2000);
                $('#depionnen').append(item);

            });


        });
    </script>
</body>