Created
July 31, 2012 18:43
-
-
Save yuchant/3219394 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <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