Search code examples
jquerygetjson

Using .getJSON to return images and then wrap them in anchors

What's the easiest way to wrap an anchor with the img src as the href in this code?:

$(function(){
   $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?", 
       function(data){
       $.each(data.items, function(i, item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");

            if (i == 3) 
                       return false;    
   }); 
 }); 
});

It would be great if the outputted HTML code could look something like this:

<div id="images">
    <a href="...888_m.jpg"><img src="...888_m.jpg"></a>
    <a href="...373_m.jpg"><img src="...373_m.jpg"></a>
    <a href="...a17_m.jpg"><img src="...a17_m.jpg"></a>
    <a href="...c51_m.jpg"><img src="...c51_m.jpg"></a>
</div>

Here is what I've come up with so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <title>JSON Example</title>
        <script type="text/javascript" src= "http://code.jquery.com/jquery-latest.js">
        </script>

        <script type="text/javascript">
            $(function(){
                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?", 
                    function(data){
                    $.each(data.items, function(i, item){

                        $("<img/>").attr("src", item.media.m).appendTo("#images"); 

                    if (i == 3) 
                            return false; //return 4 images then stop   


                });     

                var imgs = document.getElementsByTagName("img"); //build imgs array

                for (var i=0; i<imgs.length; i++) {
                    source = imgs[i].getAttribute("src"); // grabs the img src attributes 
                    //build anchors with attributes href and title
                    $("<a>").attr({ 
                        href: source,
                        title: "Courtesy of Flicker"
                    }).appendTo("#images"); //injects anchors into "images" div

                    /**********************
                     then I'm stuck. Although everything so far is working, 
                     I need to rewrite the code inserted into the DOM at this point
                     so that the images are wrapped by the anchors. 

                    **********************/

                };
            });

        });
        </script>
        <style type="text/css">
            img {
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="images">  </div>
    </body>
</html>

Any ideas?

Solution 
  • $.each(data.items, function(i, item){
   var img = $("<img/>").attr("src", item.media.m);
   $("<a/>").attr({href: item.media.m, title: "Courtesy of Flicker"})
      .append(img).appendTo("#images");
});