Flickr SlideShow Widget using AJAX Extender

Now here we will discuss the AJAX SlideShow control with very interactive live example using Flickr API.We will use the Array of Images retrieved from Flickr and will show it as slideshow. Flickr Photo Search method of Flickr API returns the set of images according to the search keyword passed through the API call.

To use the Flickr API you must have Flickr Account to get the Flickr API key. This API key authorizes the Flickr API call and allows you to get the photos online. Flickr Rest API web method flickr.photos.search can be used to get photos. There are some parameters to direct the search criteria to get best match for the search keyword passed. You can control the number of photo results you want to display. Flickr API get photos return the results with Safe search on as well as accuracy of World Level. You can also control the results returned using their sort order as relevance along with content type as photos only.

Sample Flickr API web method

http://flickr.com/services/rest/?api_key=DEVELOPER API KEY HERE &method=flickr.photos.search &text=KEZWORD HERE &accuracy=1 &safe_search=1 &per_page=10 &privacy_filter=1 &content_type=1 &sort=relevance

Above Flickr API web method get photos according to the parameters passed such as:

text = KEYWORD,

accuracy = 1 for World Level,

safe_search = 1 for safe search,

per_page = 10 to get 10 photo results,

privacy_filter = 1 to get public photos only,

content_type = 1 to get photos only and

sort = relevance to retrieve better relevant results.

You can see more parameters here at Flickr API page.

Flickr photos search method returns the XML formatted result e.g.:

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

<photos page="1" pages="824012" perpage="5" total="4120060"> 

<photo id="46778151" owner="89991230@N00" secret="9a3ffc7561" server="31" farm="1" title="Baywatch - a dreamy nature" ispublic="1" isfriend="0" isfamily="0" /> 

<photo id="138036228" owner="98761577@N00" secret="71c75c381e" server="48" farm="1" title="&quot;Nature Combined with Nurture Makes People Mature!&quot; :)" ispublic="1" isfriend="0" isfamily="0" /> 

<photo id="260299876" owner="97376099@N00" secret="1aaea12b99" server="121" farm="1" title="Nature Morte*" ispublic="1" isfriend="0" isfamily="0" /> 

<photo id="2286429154" owner="14248585@N05" secret="f9c9f2dd5a" server="2207" farm="3" title="pure nature colours" ispublic="1" isfriend="0" isfamily="0" /> 

<photo id="1847000209" owner="97056643@N00" secret="3d6730c31d" server="2170" farm="3" title="This photo has been preselected by the Nature Conservancy for the final;0)" ispublic="1" isfriend="0" isfamily="0" /> 

</photos> 

</rsp>

You can see that in the above XML result of Flickr Photos Search API web method there is no URL path for the photos, so you have to build the URL path for the images. Following is a way to construct the path from the attributes of Flickr photo element:

http : //farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg

Just replace the values farm-id with farm attribute of photo element,server-id with server attribute, id with id attribute, secret with secret attribute and use m, s, t or b in place of [mstb] to get the different size of retrieved photos.

See the complete documentation at Flickr Service Page to map the photo URLs.

Preview

ASP.Net 2.0 AJAX SlideShow Extender Control

To display the set of Photos retrieved from the Flickr using API Call you have to create an ASP.Net page Web method to populate anAJAXControlToolkit.Slide[] array. This Slide Array ofAJAXControlToolkit displays the images in the Targeted Image control using SlideShow Extender control of AJAX.

You can add another functionality of Flickr photo search on ASP.Net web page to see the SlideShow of retrieved photos.