Skip to content

Instantly share code, notes, and snippets.

@yuchant
Created July 31, 2012 18:43
Show Gist options
  • Select an option

  • Save yuchant/3219394 to your computer and use it in GitHub Desktop.

Select an option

Save yuchant/3219394 to your computer and use it in GitHub Desktop.
<script type="text/javascript">
$(function() {
var API_KEY = '2132d453ab3cc055308fb40c708ea412';
$(".set").each(function() {
var set_id = $(this).find('a.flickr-set').attr('rel');
url = 'http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=' + API_KEY + '&per_page=48&page=1&format=json&jsoncallback=?&photoset_id=' + set_id;
var selector = $(this);
data = $.getJSON(url,
function(data, status, xhr) {
var counter = 0;
$.each(data.photoset.photo, function(i, item) {
photo_url = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret;
small = photo_url + '_s.jpg';
large = photo_url + '_b.jpg';
element = $('<img class="thumbnail" style="display:inline;" src="'
+ small
+ '" />').hide();
selector.find('.img-container').append(element);
element.wrap('<a class="lightbox" style="display:inline;" href="' + large + '" rel="' + set_id + '"></a>');
element.load(function() {
counter ++;
if (counter == data.photoset.photo.length) {
selector.find('img').fadeIn();
selector.find('a.lightbox').fancybox();
};
})
}); // end each
} // end callback function
); // end json
/*
s small square 75x75
t thumbnail, 100 on longest side
m small, 240 on longest side
- medium, 500 on longest side
z medium 640, 640 on longest side
b large, 1024 on longest side*
*/
})
});// end jquery
</script>
<div class="set">
<h3>
<a href="<!-- not relevant: it's just a link -->" class="flickr-set" rel="YOUR FLICKR SET ID HERE">Click Me</a>
</h3>
<div class="img-container"><!-- dynamically filled --></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment