• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 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

API

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
Posted in: Education, Intermediate Tagged: API, bootstrap, code, flickr, intermediate level, JavaScript

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

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
January 2021
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031
« Apr    

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

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

CodeProject

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

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

Archives

Access Options

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

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

McAfee SecureNorton by SymantecVirusTotal