flickr

image_pdfimage_print

Flickr API [INTERMEDIATE]

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&amp;api_key=6e0f95c5574ceae02eb3c0c05c6da985&amp;sort=relevance&amp;per_page=300&amp;format=json&amp;media=photos&amp;dimension_search_mode=min&amp;height=1024&amp;width=1024&amp;advanced=1&amp;safe_search=2&amp;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/>&copy; 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