Multiple Random Image Display

by mmansion

HTML

<button>Click</button>

<div id="wrapper">
    <img id="img1"src="#">
    <img id="img2"src="#">
    <img id="img3"src="#">
    <img id="img4"src="#">
</div>

CSS

#wrapper {
    max-width: 425px;
}
img {
    width: 200px;
    height: 150px;
}

JavaScript

//display multiple random images

var imageList = [
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img1.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img2.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img3.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img4.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img5.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img6.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img7.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img8.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img9.jpg",
    "https://googledrive.com/host/0Bzs0c1OjIlXfOTh6RFByYjhyOW8/img10.jpg"
];

function updateRandomImages() {
    var imageElements = $('img');
    $.each(imageElements, function(index, element) {
        displayRandomImage(element);
    });
}

function displayRandomImage(element) {
    var index = getRandomNumber(); 
    $(element).attr( 'src', imageList[index] );
}

function getRandomNumber() {
    return Math.floor(Math.random() * 10);
}

$('button').click(function () {
    updateRandomImages();
});

//start off with some random images
updateRandomImages();