jQuery flickr demo

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>

<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>

1
2
3
4
5
6

<style type="text/css">
img {
    height: 200px;
    float: left;
}
</style>

<style type="text/css"> img { height: 200px; float: left; } </style>

1

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

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