jQuery flickr demo

這個demo是使用 jQuery 呼叫 flickr api 顯示有關 貓 的 tags.

jQuery 程式部份如下 :

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
  $(document).ready(function() {
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).attr("border", 0).appendTo("#images") 
         .wrap("<a href='" + item.link + "'></a>");
        // if ( i == 3 ) return false;
      });
    });
  });
</script>

cssl 部份如下 :

1
2
3
4
5
6
<style type="text/css">
img {
    height: 200px;
    float: left;
}
</style>

html 部份如下 :

1
<div id="images"></div>

請看 DEMO