Geolocation and Flickr photos taken nearby - jQuery plugin
['Geolocate the user and find Flickr photos taken nearby', "Use HTML5 Geolocation API to find the user's current location", 'Use the Flickr API to find images that were taken within 3 miles of the users location', 'Display one of the images in the space provided along with the title of the image.', "Display any status or error messages in the 'loading' space"] author(s): Giulia Alfonsi electric_g
by Alex Azuero
HTML
<figure class="flickr">
<figcaption></figcaption>
</figure>
JavaScript
(function($) {
// plugin definition
$.fn.flickrWithin = function(options) {
var defaults = {
loading: 'Loading',
error_geo: 'Geolocation not supported',
error_pos: 'Failed in getting current position',
error_flickr: 'There was a problem connecting to Flickr',
error_nopic: 'No pictures found in your area',
caption: 'figcaption',
api_key: ''
},
// extend default options with those provided
opts = $.extend(defaults, options),
// system variables
_type = 'json',
flickr_api_url = 'http://api.flickr.com/services/rest/?jsoncallback=?',
flickr_img_url = 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_z.jpg',
flickr_title = '',
flickr_api = { // flickr.com/services/api/flickr.photos.search.html
method: 'flickr.photos.search',
api_key: opts.api_key,
content_type: 1,
media: 'photos',
lat: 0,
lon: 0,
radius: 3,
radius_units: 'mi',
per_page: 1,
page: '',
format: _type,
nojsoncallback: 1
};
// implementation code goes here
return this.each(function() {
var $this = $(this),
$caption = $this.find(opts.caption);
$caption.html(opts.loading);
// Geolocation success
function success(position) {
var pos = position.coords;
flickr_api.lat = pos.latitude;
flickr_api.lon = pos.longitude;
$.get(flickr_api_url, flickr_api, function(data) {
if (data.photos.photo.length == 0) {
$caption.html(opts.error_nopic);
}
else {
var pic = data.photos.photo[0];
flickr_title = pic.title,
flickr_img_url = flickr_img_url.replace(/({)([\w\-]+)(})/gi, function(str, p1, p2) {return pic[p2];}); // replace each {key} with its value
...