Playing with REST API and JSON parsing and some layout frameworking with Bootstrap.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
<!-- JQuery Library -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Flickr API Image Script -->
<script type="text/javascript">
//<![CDATA[
<!-- Documentation : https://www.flickr.com/services/api/response.json.html -->
console.log("[ Flickr API Example\n[ Developed by Major Mike\n[ Technology by Bootstrap Framework\n[ Application : Random Images Dynamically Retrieved and Displayed\n[ Version : 1.0 (r-052915)");
var photos = [];
console.log("[ Begin Processing Data ]");
function jsonFlickrApi(rsp){
if (rsp.stat != "ok"){
console.log("[ An Error Occured ]");
return;
} else {
console.log("[ Data Loaded Successfully ]");
}
$.each( rsp.photos.photo, function( i, photo ) {
url = "https://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_b.jpg"; // z=640 c=800 b=1024 h=1600 k=2048 o=original (requires special handling)
photos.push('<img src="' + url + '" class="img-responsive" alt="' + photo.title + '" border="0" />|' + photo.title);
console.log("+=> Processing Item [" + (i+1) + "] " + "ID (" + photo.id + ") TITLE (" + photo.title + ") URL (" + url + ")");
})
console.log("[ Processed Data Items : " + photos.length + " ]");
loadPicture(getRandom());
};
function getRandom(){
console.log("[ Getting Seed #" + photos.length + " ]");
var tmp = Math.floor(Math.random()*photos.length);
console.log("[ Random Seed (" + tmp + ") Generated ]");
return tmp;
};
function loadPicture(rnd){
console.log("[ Loading Item #" + rnd + " ] ( " + photos[rnd] + " )");
var dummy = photos[rnd].split("|");
$("#picture").html(dummy[0]);
$("#title").html(dummy[1]);
photos.splice(rnd, 1);
console.log("[ Updating Available Items : " + photos.length + " Remaining ]");
if (photos.length < 1){
console.log("[ Getting More Items ]");
location.reload();
};
registerClick();
console.log("[ Registering Click Handler ]");
};
function registerClick(){
$("img").click(function(){
loadPicture(getRandom());
});
};
//]]>
</script>
<body style="background-color: black;">
<!-- Begin Page Container -->
<div class="container-fluid">
<div class="row" id="header">
<div class="col-xs-12">
<div class="well well-lg" style="background-color: #363F43;">
<h1 style="color: #0063DB; text-shadow: 2px 2px 4px black; font-weight: bold;">Random Flickr Pics<br/>
<small style="color: #FF0084; text-shadow: 2px 2px 4px black;">exploring Hawaii
<span style="color: white;" class="glyphicon glyphicon-tags" data-toggle="tooltip" title="Keep in mind that tags are entirely under the control of the user and Flickr and may not always be accurate" data-placement="bottom"></span>
</small>
</h1>
</div>
</div>
</div>
<div class="row" id="main">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-body" id="picture" style="background-color: white;">
<!-- picture is shown here -->
<script src="https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6e0f95c5574ceae02eb3c0c05c6da985&sort=relevance&per_page=300&format=json&media=photos&dimension_search_mode=min&height=1024&width=1024&advanced=1&safe_search=2&text=hawaii" type="text/javascript"></script>
</div>
<div class="panel-footer" id="title" style="background-color: silver; font-weight: bold; font-variant: small-caps;">
<!-- captions load here -->
</div>
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-xs-12">
<div class="well well-sm" style="font-size: 22px; font-variant: small-caps;">
<small>
<span id="version"></span>
<br/>© 2015 by GµårÐïåñ [ Major Mike ]
<br/><a href="http://getbootstrap.com/" target="_blank">{ built on Bootstrap framework }</a><br/>
</small>
</div>
</div>
</div>
</div>
<!-- End Page Container -->
<script type="text/javascript">
//<![CDATA[
var version = "1.0 (r) [052915]";
$(document).ready(function(){
<!-- Initialize Tooltip -->
console.log("[ Tooltip Initialized ]");
$('[data-toggle="tooltip"]').tooltip();
});
<!-- Version Control -->
$("#version").html("Version : " + version);
//]]>
</script>
DEMO | DOWNLOAD
