Mobile-Web-App: Flickr

Friday, June 8, 2012

Load Flickr images and display in horizontal scroll bar, using jQuery

The former "Load Flickr image in JSON format, using jQuery - display in <ul>". In this version, it's modified to display in horizontal scroll bar.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){    

    $.getJSON(
      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      { format: "json"},
        function(data){  
          var number_of_image = 0;
          $.each(data.items, function(i,item){  
            var new_img = $(document.createElement("img")); 
            new_img.attr("src", item.media.m); 
            new_img.css({"width": 150, "height": 150, "margin": 5});    
            $("#flickrimage").append(new_img);
            
            number_of_image++;
            
          }); 

          $("#flickrimage").css({"width": number_of_image * 160});       
        }
      );
      
  
  }) 

  </script>
</head>
<body>
<p>Display Flickr images in horizontal scroll bar</p>
<div style="width:800px; height: 180px; overflow:scroll;">
<div id="flickrimage">
</div>
</div>
</body>
</html>

Sunday, June 3, 2012

Load Flickr image in JSON format, using jQuery

Example to load Flickr image in JSON format, using jQuery.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){
  
    var div_flickrimage = document.getElementById("flickrimage");
    var new_ul = $(document.createElement("ul"));
    $(new_ul).appendTo(div_flickrimage);
  
    $.getJSON(
      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      { format: "json"},
        function(data){
          $.each(data.items, function(i,item){
          
            var new_li = $(document.createElement("li"));
            $("<img/>").attr("src", item.media.m).appendTo(new_li);
            new_li.appendTo(new_ul);
            
          });          
        }
      );
  })  

  </script>
</head>
<body>
  <div id="flickrimage"></div>

</body>
</html>