JQuery Slideshow Using Flickr Data

Code Sample

<link rel="stylesheet" href="agile_carousel.css" type='text/css'>
<div class="slideshow" id="basic_slideshow"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>

<script>
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20flickr.photosets.photos(7)%20WHERE%20photoset_id%3D'72157626505777807'&format=json&diagnostics=true&callback=?", function (data) {
	var flickr_photos_array = data["query"]["results"]["photo"];
	var flickr_photos_array_length = flickr_photos_array.length;
  	var curr_photo = "";
	var image_url = "";
	var title = "";
	var slide_data = "";
	var mod_data = "";
 	
   for (var i = 0; i < flickr_photos_array_length; i++) {
 		// image url
  		curr_photo = flickr_photos_array[i];
  		image_url = "https://farm" + curr_photo['farm'] + ".static.flickr.com/" + curr_photo['server'] + "/" + curr_photo['id'] + "_" + curr_photo['secret'] + ".jpg";
 		// caption
  		title = curr_photo['title'];
 		// build slide_data
  		slide_data += "{\"content\": \"<div class=\'slide_inner\'><a class=\'photo_link\' href=\'" + image_url + "\'><img class=\'photo\' src=\'" + image_url + "\' alt=\'" + title + "\'></a><a class=\'caption\'  href=\'" + image_url + "\'>" + title + "</a></div>\"}";
 		// add comma after each member unless it is last
  		if (i < flickr_photos_array_length - 1) {
  			slide_data += ",";
  		} // if
  	} // for
    
  	// JSON format
  	mod_data = "[" + slide_data + "]";
 	// turn string into object
  	mod_data = jQuery.parseJSON(mod_data);
    
 	$(document).ready(function () {
  		$("#flickr_slideshow").agile_carousel({
  			carousel_data: mod_data,
  			carousel_outer_height: 228,
  			carousel_height: 228,
  			slide_height: 230,
  			carousel_outer_width: 480,
  			slide_width: 480,
  			transition_type: "fade",
  			timer: 4000
  		});
  	});
}); // getJSON

</script>