5 Image Table

by Brad Patton

HTML

<table border="0" cellpadding="5" style="width:90%;font-size:100%;border:0px solid black;border-collapse:collapse;">
	<tr style="text-align:center;">
		<td id='Image0'>Image0</td>
		<td id='Image1'>Image1</td>
    <td id='Image2'>Image2</td>
	</tr>
	<tr>
    <td colspan="3"  style="text-align:center;">
      <table width='100%'>
        <tr>
          <td id='Image3' width='50%'>Image3</td>
          <td id='Image4' width='50%'>Image4</td>
        </tr>
      </table>
    </td>
	</tr>
<table>

JavaScript

$(function() {
	var images = [
		{ "url": "<img src='http://surveygizmolibrary.s3.amazonaws.com/library/90282/MK19Small.png' />",
		"caption": "MK19" },
		{ "url": "<img src='http://surveygizmolibrary.s3.amazonaws.com/library/90282/VG82Small.png' />",
		"caption": "VG82" },
		{ "url": "<img src='http://surveygizmolibrary.s3.amazonaws.com/library/90282/BL73Small.png' />",
		"caption": "BL73" }, 
		{ "url": "<img src='http://surveygizmolibrary.s3.amazonaws.com/library/90282/TS46Small.png' />",
		"caption": "TS46" },
		{ "url": "<img src='http://surveygizmolibrary.s3.amazonaws.com/library/90282/WN50Small.png' />",
		"caption": "WN50" }];
	shuffleArray(images);
	
	for (var i = 0; i < images.length; i++) {
		// Find the cell for the current image
		var tableCell = $("#Image"+i);
		if (tableCell.length == 0) continue;
		
		var image = images[i];
		tableCell.html(image.url + "<br>" + image.caption);
	}
});

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}