From dc6bc990b812b4db3b9bf06ba4ab1f96490a1c73 Mon Sep 17 00:00:00 2001 From: Dan Smith Date: Tue, 24 May 2011 10:19:06 -0400 Subject: [PATCH] Added tagSelect method that fetches tags used on the photos and turns it into a select list. The select list can then be used to filter the photos returned from a photoSearch method call. - Example included in examples.html --- examples.html | 160 +++++++++++++++++++++++++++++++++-------------- jquery.flickr.js | 79 ++++++++++++++++++----- 2 files changed, 176 insertions(+), 63 deletions(-) diff --git a/examples.html b/examples.html index 7db46c7..e355e20 100644 --- a/examples.html +++ b/examples.html @@ -1,52 +1,118 @@ - - + Flickr API in jQuery - - - - - - - + + + + + + +
-

photosGetRecent()

-
- -

photosGetContactsPublicPhotos({user_id: '95448703@N00', count: 10})

-
- -

photosSearch({user_id: '95448703@N00', per_page: 10})

- - -

photosSearch({user_id: '95448703@N00', per_page: 10, tags: 'portfolio'})

-
- -

photosetsGetPhotos({photoset_id: '72157600185772527', per_page: 10})

-
+

+ photosGetRecent()

+
+
+

+ photosGetContactsPublicPhotos({user_id: '95448703@N00', count: 10})

+
+
+

+ photosSearch({user_id: '95448703@N00', per_page: 10})

+ +

+ photosSearch({user_id: '95448703@N00', per_page: 10, tags: 'portfolio'})

+
+
+

+ photosetsGetPhotos({photoset_id: '72157600185772527', per_page: 10})

+
+
+

+ tagSelect({user_id: '95448703@N00'},{multiple: true, size: 5, prompt: 'Select one...', onchange: getPhotosByTag }})

+
+
+
+
- - \ No newline at end of file + + diff --git a/jquery.flickr.js b/jquery.flickr.js index 6522d6c..8b2be9c 100644 --- a/jquery.flickr.js +++ b/jquery.flickr.js @@ -3,6 +3,11 @@ * version: 1.0 (02/23/2009) * written for jQuery 1.3.2 * by Ryan Heath (http://rpheath.com) + * + * Changes: + * - Added tagSelect method to get the list of tags + * in a flickr account which can be used to filter + * the displayed images. Dan Smith 05/23/2011. *****************************************/ (function($) { // core extensions @@ -15,7 +20,7 @@ return true } }) - + // base flickr object $.flickr = { // the actual request url @@ -31,28 +36,28 @@ case 't' : return '_t' // thumbnail case 's' : return '_m' // small case 'm' : return '' // medium - default : return '' // medium + default: return '' // medium } }, // determines what to do with the links linkTag: function(text, photo, href) { - if (href === undefined) href = ['http://www.flickr.com/photos', photo.owner, photo.id].join('/') + if (href === undefined) href = ['http://www.flickr.com/photos', photo.owner, photo.id].join('/') return '' + text + '' } } - + // helper methods for thumbnails $.flickr.thumbnail = { src: function(photo, size) { if (size === undefined) size = $.flickr.translate($.flickr.settings.thumbnail_size) - return 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + + return 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + size + '.jpg' }, imageTag: function(image) { return '' + image.alt + '' } } - + // accepts a series of photos and constructs // the thumbnails that link back to Flickr $.flickr.thumbnail.process = function(photos) { @@ -63,22 +68,22 @@ image.alt = photo.title var size = $.flickr.settings.link_to_size - if (size != undefined && size.match(/sq|t|s|m|o/)) + if (size != undefined && size.match(/sq|t|s|m|o/)) href = $.flickr.thumbnail.src(photo, $.flickr.translate(size)) - + html = $.flickr.linkTag($.flickr.thumbnail.imageTag(image), photo, href) - + return ['
  • ' + html + '
    • '] }).join("\n") - + return $('').append(thumbnails) } - + // handles requesting and thumbnailing photos $.flickr.photos = function(method, options) { var options = $.extend($.flickr.settings, options || {}), elements = $.flickr.self, photos - + return elements.each(function() { $.getJSON($.flickr.url(method, options), function(data) { photos = (data.photos === undefined ? data.photoset : data.photos) @@ -86,7 +91,44 @@ }) }) } - + + // handles requesting list of tags + $.flickr.tags = function(method, options, select) { + var options = $.extend($.flickr.settings, options || {}), + elements = $.flickr.self, tags + + return elements.each(function() { + $.getJSON($.flickr.url(method, options), function(data) { + var list = $.flickr.tags.selectList(data.who.tags, select); + elements.append(list); + }) + }) + } + + // converts tags into select list. parameters: + // multiple: can select multiple items in list (bool). + // size: length of displayed list box, set to 0 to create a drop down list (integer). + // prompt: adds a text prompt to the top of the list (e.g. "Please select...") (string). + // onchange: callback to handle the select list's change event (function). + $.flickr.tags.selectList = function(tags, options) { + // what if there are no tags? + var optionList = $.map(tags.tag, function(tag) { + return [''] + }).join("\n") + + var selectList = $(''); + if (options.multiple === true) + selectList.attr('multiple', 'multiple'); + if (options.size !== undefined && options.size > 0) + selectList.attr('size', options.size); + if (options.prompt !== undefined && options.prompt != '') + selectList.append(''); + if (typeof(options.onchange) === 'function') + selectList.change(options.onchange); + + return selectList.append(optionList) + } + // namespace to hold available API methods // note: options available to each method match that of Flickr's docs $.flickr.methods = { @@ -105,19 +147,24 @@ // http://www.flickr.com/services/api/flickr.photosets.getPhotos.html photosetsGetPhotos: function(options) { $.flickr.photos('flickr.photosets.getPhotos', options) + }, + // http://www.flickr.com/services/api/flickr.tags.getListUser.html + // select parameter; {multiple: true, size: 4, prompt: 'Select one...', onchange: getPhotosByTag } + tagSelect: function(options, select) { + $.flickr.tags('flickr.tags.getListUser', options, select) } } - + // the plugin $.fn.flickr = function(options) { $.flickr.self = $(this) - + // base configuration $.flickr.settings = $.extend({ api_key: 'YOUR API KEY', thumbnail_size: 'sq' }, options || {}) - + return $.flickr.methods } })(jQuery); \ No newline at end of file