Thursday, October 27, 2011

9:11 AM
Looking for a quick way to pull your Flickr photos onto your website? Using a lil bit of jQuery and the code below you can pull the latest photos right onto your webpage.



Here’s the code you need to add to your head. Don’t forget to link to jQuery of course.


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=50856633@N07&format=json&jsoncallback=?", function(data) {
var target = "#flickr-div"; // Name of div surrounding images.
for (i = 0; i <= 9; i = i + 1) { // Loop through the 10 most recent, [0-9]
var pic = data.items[i];
var liNumber = i + 1; // Add class to each LI (1-10)
$(target).append("<a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m + "' /></a>");
}
});
});
</script>

Replace 50856633@N07 with your Flickr account number. You can also change the number of images being pulled onto the page.
*original code from CSS-TRICKS

0 comments: