Proxy > Gmail Facebook Yahoo!

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 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 API KEY HERE & &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" />

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}{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.


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.

Sample Code for Flickr SlideShow Extender

<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"

PlayInterval property of SlideShow Extender is set to 10000 so that it could cache the retrieved image properly before displaying.

Download the complete C# source code for Flickr API Photo Search to get photos and AJAX SlideShow Extender to display the slideshow of photo results…

To use the Flickr Photo search sample place your API Key in web.config file to use the Flickr API to get photos.


0 Respones to "Flickr SlideShow Widget using AJAX Extender"

Send mail to your Friends.  

Expert Feed

Return to top of page Copyright © 2011 | My Code Logic Designed by Suneel Kumar