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