Last active
October 25, 2018 13:25
-
-
Save kylerush/1695549 to your computer and use it in GitHub Desktop.
Detailed Flickr photo wall tutorial
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(data){ | |
| //loop through the results with the following function | |
| $.each(data.photoset.photo, function(i,item){ | |
| //build the url of the photo in order to link to it | |
| var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg' | |
| //turn the photo id into a variable | |
| var photoID = item.id; | |
| //use another ajax request to get the geo location data for the image | |
| $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', | |
| function(data){ | |
| //if the image has a location, build an html snippet containing the data | |
| if(data.stat != 'fail') { | |
| pLocation = '<a href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1" target="_blank">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>'; | |
| } | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"> | |
| <h1><a>DEMO: Use the Flickr API, JavaScript (jQuery), AJAX and JSON to Build a Photo Wall <span>by Kyle Rush</span></a></h1> | |
| <a id="a-link" href="http://www.flickr.com/photos/kylerush/">Click Here to See My Flickr Photos</a> | |
| <div id="tut-info" class="clearfix"> | |
| <a>View Tutorial >></a> | |
| <a>How to Use the Flickr API >></a> | |
| <a href="http://www.kylerush.net">kylerush.net >></a> | |
| </div><!--/#tut-info--> | |
| </div><!--/#container--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string | |
| var imgCont = '<div class="image-container" style="background: url(' + photoURL + ');"><div class="image-info"><p class="top"><a class="title" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '">' + data.photo.title._content + '</a> <span class="author">by <a href="http://flickr.com/photos/' + data.photo.owner.nsid + '">' + data.photo.owner.username + '</a></span></p><div class="bottom"><p><span class="infoTitle">Comments:</span> ' + data.photo.comments._content + '</p>'; | |
| //if there are tags associated with the image | |
| if (typeof(tags) != 'undefined') { | |
| //combine the tags with an html snippet and add them to the end of the 'imgCont' variable | |
| imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>'; | |
| } | |
| //if the image has geo location information associate with it | |
| if(typeof(pLocation) != 'undefined'){ | |
| //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable | |
| imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>'; | |
| } | |
| //add the description & html snippet to the end of the 'imgCont' variable | |
| imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>'; | |
| //append the 'imgCont' variable to the document | |
| $(imgCont).appendTo('#image-container'); | |
| //delete the pLocation global variable so that it does not repeat | |
| delete pLocation; | |
| }); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jsonFlickrApi({ | |
| "photos": { | |
| "page": 4, | |
| "pages": 52, | |
| "perpage": 3, | |
| "total": "154", | |
| "photo": [{ | |
| "id": "3606437738", | |
| "owner": "29096781@N02", | |
| "secret": "7a02f95b14", | |
| "server": "2480", | |
| "farm": 3, | |
| "title": "Water Fountain Closeup", | |
| "ispublic": 1, | |
| "isfriend": 0, | |
| "isfamily": 0 | |
| }, | |
| { | |
| "id": "3605617857", | |
| "owner": "29096781@N02", | |
| "secret": "2f9da1d270", | |
| "server": "3385", | |
| "farm": 4, | |
| "title": "Water Fountain Closeup", | |
| "ispublic": 1, | |
| "isfriend": 0, | |
| "isfamily": 0 | |
| }, | |
| { | |
| "id": "3605617773", | |
| "owner": "29096781@N02", | |
| "secret": "bf1c89212e", | |
| "server": "2463", | |
| "farm": 3, | |
| "title": "Water Fountain Closeup", | |
| "ispublic": 1, | |
| "isfriend": 0, | |
| "isfamily": 0 | |
| }] | |
| }, | |
| "stat": "ok" | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //assign hover actions to each image | |
| $('.image-container').live('mouseover', function(){ | |
| $(this).children('div').attr('class', 'image-info-active'); | |
| }); | |
| $('.image-container').live('mouseout', function(){ | |
| $(this).children('div').attr('class', 'image-info'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| jQuery('#a-link').remove(); | |
| jQuery('<img alt="" />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container'); | |
| //assign your api key equal to a variable | |
| var apiKey = '[YOUR API KEY]'; | |
| //the initial json request to flickr | |
| //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=? | |
| $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157619415192530&format=json&jsoncallback=?', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html {background: #000; font-size: 12px;} | |
| #container {width: 810px; margin: 0 auto 0 auto;} | |
| #notice {color: #fff; font-weight: bold; font-size: 15px; font-style: italic;} | |
| h1 {font-size: 38px; line-height: 45px;} | |
| h1 span {font-size: 16px; color: #ff0084;} | |
| h1 a:hover span {color: #fff;} | |
| #tut-info {width: 810px; margin: 0 0 20px 0;} | |
| #tut-info a {float: left; display: block; background: #fff; font-size: 20px; padding: 20px 20px; font-weight: bold; margin: 0 15px 0 0;} | |
| #tut-info a:hover {background: #ff0084;} | |
| #loader {margin: 20px 0 40px 350px;} | |
| .image-container {height: 180px; width: 240px; position: relative; float: left; margin: 0 20px 20px 0; background-color: #666; border: 5px solid #fff; overflow: hidden;} | |
| .image-info {display: none;} | |
| .image-info-active {height: 180px; width: 240px; background: rgba(255,255,255,.85);} | |
| a {cursor: pointer; text-decoration: none; color: #0063dc;} | |
| a:hover {color: #fff; background: #0063dc;} | |
| a.title {color: #ff0084;} | |
| a.title:hover {color: #fff; background: #ff0084;} | |
| .bottom {padding: 5px;} | |
| .bottom p {margin: 0 0 5px 0; } | |
| p.top {background: #fff; width: 240px; padding: 0 0 5px 0; margin: 0;} | |
| a.title {font-size: 20px; font-weight: bold; display: block; line-height: 20px;} | |
| span.author {font-size: 10px;} | |
| .infoTitle {font-weight: bold;} | |
| .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } | |
| .clearfix {display:inline-block;} | |
| .clearfix {display:block;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment