Skip to content

Instantly share code, notes, and snippets.

@kolber

kolber/random-json-images.html

Created October 18, 2011 11:46
Show Gist options
  • Save kolber/1295239 to your computer and use it in GitHub Desktop.
Save kolber/1295239 to your computer and use it in GitHub Desktop.
Download ZIP
Random JSON table
Raw
random-json-images.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>JSON table</title>
<style>
td { border: 1px solid black; padding: 10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
window.json = [
{"thumb": "t3211654136.jpg", "full": "3211654136.jpg"},
{"thumb": "t3230396836.jpg", "full": "3230396836.jpg"},
{"thumb": "t3251833807.jpg", "full": "3251833807.jpg"},
{"thumb": "t3257005706.jpg", "full": "3257005706.jpg"},
{"thumb": "t3273873584.jpg", "full": "3273873584.jpg"},
{"thumb": "t3284118942.jpg", "full": "3284118942.jpg"},
{"thumb": "t3305267859.jpg", "full": "3305267859.jpg"},
{"thumb": "t3305268007.jpg", "full": "3305268007.jpg"},
{"thumb": "t3331845947.jpg", "full": "3331845947.jpg"},
{"thumb": "t3346092034.jpg", "full": "3346092034.jpg"},
{"thumb": "t3347794249.jpg", "full": "3347794249.jpg"},
{"thumb": "t3347794315.jpg", "full": "3347794315.jpg"},
{"thumb": "t3348629406.jpg", "full": "3348629406.jpg"},
{"thumb": "t3348629624.jpg", "full": "3348629624.jpg"},
{"thumb": "t3348629970.jpg", "full": "3348629970.jpg"},
{"thumb": "t3368998279.jpg", "full": "3368998279.jpg"},
{"thumb": "t3369779050.jpg", "full": "3369779050.jpg"},
{"thumb": "t3369819738.jpg", "full": "3369819738.jpg"},
{"thumb": "t3388049401.jpg", "full": "3388049401.jpg"},
{"thumb": "t3388660614.jpg", "full": "3388660614.jpg"},
{"thumb": "t3403038219.jpg", "full": "3403038219.jpg"},
{"thumb": "t3419357179.jpg", "full": "3419357179.jpg"},
{"thumb": "t3448371239.jpg", "full": "3448371239.jpg"},
{"thumb": "t3507019942.jpg", "full": "3507019942.jpg"},
{"thumb": "t3531760703.jpg", "full": "3531760703.jpg"},
{"thumb": "t3531761089.jpg", "full": "3531761089.jpg"},
{"thumb": "t3537612941.jpg", "full": "3537612941.jpg"},
{"thumb": "t3537633549.jpg", "full": "3537633549.jpg"},
{"thumb": "t3550241573.jpg", "full": "3550241573.jpg"},
{"thumb": "t3550241897.jpg", "full": "3550241897.jpg"},
{"thumb": "t3550242311.jpg", "full": "3550242311.jpg"},
{"thumb": "t3551046742.jpg", "full": "3551046742.jpg"},
{"thumb": "t3551047142.jpg", "full": "3551047142.jpg"},
{"thumb": "t3551050354.jpg", "full": "3551050354.jpg"}
];
</script>
<script>
$(function() {
// Store the JSON in a variable named images for convenience
var images = window.json,
table = $('#table');
// Randomise array order
images.sort(function() { return 0.5 - Math.random() });
// Start the html string
var html = '<tr>';
for (var i = 0, ii = images.length; i < ii; i++) {
// Every fourth item, start a new row
if (i > 0 && i % 4 == 0) html += '</tr><tr>';
// Append a new image into our string of html
// html += '<td><img src="'+images[i].thumb+'" alt="'+images[i].thumb+'"></td>';
html += '<td>'+images[i].thumb+'</td>';
}
// Inject the html into the table (and close the last row)
table.html(html+'</tr>');
});
</script>
</head>
<body>
<table id="table"></table>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment