• 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

flickr

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)
February 2021
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
« 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

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

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