display image from flickr non-geographically and geographically

final question

//question: How can I use this method with the flickr example? locateImages(data) would get lat and longs so I could put a marker with an id on them. displayImages(data) will display the images on the page in a grid fashion. Further thoughts are when people hover on the markers the image of that id will show up in a bubble.  

Here's the very coarse structure

$getJSON("http://blahblah",locateImages(data),displayImages(data); {

function locateImages(data){

    var photos = rsp.photos.photo //I don't really understand this!
    $each(data.items,function(i,item) {
        var p = photos[i];
        var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');    
        var html = "<" + "img src='" + url + "'" + ">"; // weird for 'eval', sorry
        var location = new MM.Location(p.latitude, p.longitude);
        //tbd
    },

function displayImages(data){
    
}
});

Flickr MM example

Question:

In the MM flickr example, the photos are displayed on load. However, I'd like to turn the whole flickr thing into a function that can be fired with a click on the page.

Original MM example (see changes/thought process in the next chunk):

var MM = com.modestmaps;

var provider = new MM.Layer(new MM.BlueMarbleProvider());

map = new MM.Map('map', provider, new MM.Point(1024,512))

map.setCenterZoom(new MM.Location(20.0, 0), 2);

window.jsonFlickrApi = function(rsp) {
    var photos = rsp.photos.photo;
    for (var i = 0; i < photos.length; i++) {
        var p = photos[i];
        var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');    
        var html = "<" + "img src='" + url + "'" + ">"; // weird for 'eval', sorry
        var location = new MM.Location(p.latitude, p.longitude);
        var dimensions = new MM.Point(75, 75);
        var f = new MM.Follower(map, location, html, dimensions);
    }
}

var script = document.createElement('script');
script.src = 'http://api.flickr.com/services/rest/?'+
               'method=flickr.photos.search&'+
               'api_key=a96cbef093a8c0280d3aed4e0c004d4c&'+
               'tags=clouds&'+
               'extras=geo&'+
               'has_geo=1&'+
               'format=json';
document.getElementsByTagName('head')[0].appendChild(script);

jquery method

//Then I found this jquery method (this example does not display the photos as points...)
//courtesy from http://richardshepherd.com/how-to-use-jquery-with-a-json-flickr-feed-to-display-photos/

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a96cbef093a8c0280d3aed4e0c004d4c&tags=coast&extras=geo&has_geo=1&format=json",displayImages);

function displayImages(data){
        
	var htmlString = "";
	
	$.each(data.items,function(i,item){
		
		var sourceSquare = (item.media.m).replace("_m.jpg","_s.jpg");
		
		htmlString += '<li><a href="' + item.link + '"target="_blank">';
		htmlString += '<img title ="' + item.title + '"src="' sourceSquare;
		htmlString += '" alt="';htmlString += item.title + '"/>';
		htmlString += '</a></li>
		';
	});
	
	$('#images').html(htmlString);
}
})

json is loading though

So I put these in the index.html

<script>'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a96cbef093a8c0280d3aed4e0c004d4c&tags=coast&extras=geo&has_geo=1&format=json'</script>

//... The function is not working, but the json files are loading in the background. example:
//console returns "jsonFlickrApi is not defined"
//a drawback of putting the api.flickr.com on index.html is that I can't figure out how to include the bbox parameter

jsonFlickrApi({"photos":{
		"page":1, "pages":1767, "perpage":250, "total":"441560", 
		"photo":[
			{"id":"6967136782", 
			"owner":"78472508@N00", 
			"secret":"f66697af81", 
			"server":"7110", 
			"farm":8, 
			"title":"power of the sea.",   //get - put in div
			"ispublic":1, 
			"isfriend":0, 
			"isfamily":0, 
			"latitude":52.106719, 		//get-locpoint
			"longitude":4.27721, 		//get-locpoint
			"accuracy":"13", 
			"context":0, 
			"place_id":"SqOMn1hWUbmOB9g", //is this linked to name?
			"woeid":"733252", 
			"geo_is_family":0, 
			"geo_is_friend":0, 
			"geo_is_contact":0, 
			"geo_is_public":1
                        }
                        ]
                        }
})

tried change into function, didn't work

//flickr

var m;

function jsonFlickrApi(rsp) {
    var photos = rsp.photos.photo;
    for (var i = 0; i < photos.length; i++) {
		var p = photos[i];
		var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');    
   		var html = "<" + "img src='" + url + "'" + ">";
   		var location = new mm.Location(p.latitude, p.longitude);
      	var dimensions = new mm.Point(75, 75); //this gives dimension to div
      	//var m = new mm.Map
       	var f = new mm.Follower(onload, location, html, dimensions);
   	
    //Moved this to index.html since this is creating a script there and would not work here
    //var script = document.createElement('script');
    //script.src = 'http://api.flickr.com/services/rest/?'+
    //               'method=flickr.photos.search&'+
    //               'api_key=a96cbef093a8c0280d3aed4e0c004d4c&'+
    //              'tags=clouds&'+
    //               'extras=geo&'+
    //               'has_geo=1&'+
    //               'format=json';
    //document.getElementsByTagName('head')[0].appendChild(script);   	
   	
   	}
}

//click to trigger
$('#flickr-click').onClick(e){
    jsonFlickrApi(); //I don't know where variables to put here/ doesn't seem to work...
});