AjaxToolKit Slide Show Control
While working on the Orlando Code Camp website I decided to add a page which shows a slide show of the pictures taken at code camp. The new Ajax Tool Kit Slide Show Control was perfect for this task. The photos were uploaded to the Flickr website.
The Slide Show control requires a shared (static c#) function which would return an Array of Slides. The slide class contains a link to the photo, the photos name, and description of the photo. Since I did not want to store a list of photos in a database or xml file I decided to use the FlickrNet library on the Code Plex website to get a list of the code camp photos. You will need an api key from Flickr to use this class library.
In this example I look up the username by the URL the photo collections is located. The I get a list of the photos by the username. The Flickr .Net library will create an xml file to cache the photo list by default. I turned this feature off because not all webservers will allow the dll to write to the bin directory the Flickr dll is located in.
Article about Flickr.Net API on Coding4Fun Website
Orlando Code Camp Photo Show
HTML
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Orlando Code Camp Files</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<div>
<div style="text-align: center">
<asp:Image ID="Image1" runat="server" Height="300" Style="border: 1px solid black;
width: auto" ImageUrl="http://farm1.static.flickr.com/177/434079572_dd113d2313.jpg?v=0"
AlternateText="Orlando Code Camp" />
<asp:Label runat="Server" ID="imageLabel1" /><br />
<br />
<asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
<asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
<asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server" TargetControlID="Image1"
SlideShowServiceMethod="GetPictures" AutoPlay="true" ImageDescriptionLabelID="imageLabel1"
NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton"
PlayButtonID="playButton" Loop="true" />
<asp:Label ID="lblError" runat="server" />
</div>
</div>
</form>
</body>
</html>
Code Behind File
Imports FlickrNet
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetPictures() As AjaxControlToolkit.Slide()
Dim strApiKey As String = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Dim strSecret As String = "xxxxxxxxxxxxxxxxxxxxx"
Flickr.CacheDisabled = True
Dim f As New FlickrNet.Flickr()
Try
f.ApiKey = strApiKey
f.ApiSecret = strSecret
Dim user As FlickrNet.FoundUser = f.UrlsLookupUser("http://www.flickr.com/photos/onetug/sets/72157600026752869/")
Dim ccPhotos As FlickrNet.Photos
Dim so As New FlickrNet.PhotoSearchOptions
so.UserId = user.UserId
ccPhotos = f.PhotosSearch(so)
Dim s(ccPhotos.PhotoCollection.Count) As AjaxControlToolkit.Slide
For x As Integer = 0 To ccPhotos.PhotoCollection.Count - 1
Dim ph As FlickrNet.Photo = ccPhotos.PhotoCollection.Item(x)
s(x) = New AjaxControlToolkit.Slide(ph.MediumUrl, "", ph.Title)
Next
Return s
Catch ex As Exception
Dim s(0) As AjaxControlToolkit.Slide
s(0) = New AjaxControlToolkit.Slide("http://static.flickr.com/186/435708815_c74ba67436_b.jpg", "", _
"Shawn Weisfeld delivering the books to A Gift for Teaching")
Return s
End Try
End Function
End Class