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>
No comments:
Post a Comment