• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

Flickr API [INTERMEDIATE]

September 21, 2015 by GµårÐïåñ

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
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail
Posted in: Education, Intermediate Tagged: API, bootstrap, code, flickr, intermediate level, JavaScript
← Oktoberfest 2015
SVG Graph [INTERMEDIATE] →

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
September 2015
M T W T F S S
« Aug   Oct »
 123456
78910111213
14151617181920
21222324252627
282930  

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

Google+ ➠

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

1861 1980 1972 1963 annual 1935 1967 1950 1896 1968 1964 1973 1886 1947 1942 1970 1915 1984 has_audio 1902 1976 1948 1870 1918 1911 1916 1956 1979 1908 1975 1957 1901 1939 1789 1998 code national park 1953 1944 1954 1863 1776 2000 1846 1917 1977 1941 1927 1994 1952 JavaScript 1949 1933 vocabulary 1865 1898 1986 1946 1955 1983 1859 1981 1961 1991 1962 1960 1889 1982 1993 1966 1974 event 1995 1959 has_video 1914 1989 1919 1877 1951 1971 1985 1990 1922 1812 holiday 1965 1945 1864 1992 daily pic 1938 1937 1943 1934 1940 1862 1969 memorial history

Archives

Access Options

  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2018 Major Mike | Privacy Policy | DMCA | Contact
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal