From cca783c4eee5ba94fd2d8bbcd6d7b89ffeb540be Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Fri, 26 Feb 2010 08:08:49 +1100 Subject: [PATCH] Load and style Flickr images via JS --- layouts/home.html | 10 ++++------ output/js/home.js | 26 +++++++++++++++----------- templates/image.html | 3 +++ 3 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 templates/image.html diff --git a/layouts/home.html b/layouts/home.html index 7039396..81dd00f 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -9,8 +9,10 @@ - + + + @@ -46,11 +48,7 @@
<%= render '_footer' %> diff --git a/output/js/home.js b/output/js/home.js index 33b48c2..6d4870e 100644 --- a/output/js/home.js +++ b/output/js/home.js @@ -1,22 +1,26 @@ jQuery(function () { + function render_image(o) { + return '
  • \n\ + \n\ +
    • '; + }; + function populate_flickr(data, text_status) { var ul = $("ul", "#flickr"); // ul.empty(); - jQuery.each(data.photos.photo, function(i, photo) { - var li = $("
  • "); - var a = $(""); - a.attr("href", photo.url_m); - a.attr("rel", "prettyPhoto[flickr]"); - var img = $(""); - img.attr('src', photo.url_sq); - img.attr('alt', photo.title); - a.append(img) - li.append(a); + jQuery.each($('photo', data), function(i, obj) { + var photo = $(obj); + var image = { + href: photo.attr('url_m'), + rel: "prettyPhoto[flickr]", + }; + var li = $(render_image(image)); + $('a', li).css({backgroundPosition: (i + 1) * -75 + "px -75px"}); ul.append(li); }); $("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"}); }; // Populate Flickr - //jQuery.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=aa003631cc50bd47f27f242d30bcd22f&user_id=40215689%40N00&format=json&per_page=20&extras=url_sq,url_m&jsoncallback=?", populate_flickr); + jQuery.get("/photos.xml", {dataType: 'xml'}, populate_flickr); }); diff --git a/templates/image.html b/templates/image.html new file mode 100644 index 0000000..bc0040d --- /dev/null +++ b/templates/image.html @@ -0,0 +1,3 @@ +
  • + +