DOWNLOAD SOURCE
.pic {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #EEEEEE;
border-image: none;
border-style: solid;
border-width: 5px 5px 18px;
box-shadow: 2px 2px 3px #333333;
position: absolute;
background-color: #EEEEEE;
}
#imagecontainer{
width:100%;
height:400px;
}
</style>
<script>
function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
function jsonFlickrApi(rsp) {
var s = "";
// http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
// http://www.flickr.com/photos/{user-id}/{photo-id}
//s = "total number is: " + rsp.photos.photo.length + "<br/>";
for (var i=0; i < rsp.photos.photo.length; i++) {
//var rand = randomFromInterval(1,10);
var stage_width=800;
var stage_height=400;
var left = randomFromInterval(0,stage_width);
var top = randomFromInterval(0,400);
var rot = randomFromInterval(-40,40);
if(top>(stage_height-130) && left > (stage_width-230))
{
top-=120+130;
left-=230;
}
photo = rsp.photos.photo[i];
var _url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "m.jpg";
p_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
s += '<div class="pic" style="top:'+top+'px;left:'+left+'px; -moz-transform:rotate('+rot+'deg); -webkit-transform:rotate('+rot+'deg);">'+
'<img src="' + _url + '"/></div>';
}
$('#imagecontainer').append(s);
}
$(document).ready(function() {
});
</script>
<div id="imagecontainer">
</div>
<script src="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f3c5222d18401ab6991a5532da0208b1&tags=nature&per_page=50&format=json"></script>