The goal of this post is to explain how to get the SilverLight SlideShow working with your Picture Library as a data source for the slideshow. The end result should look something like this:
Related Links
Getting Started
To get this project going, you'll need to download the source files from the codeplex website. You'll find the source files for this project here: http://www.codeplex.com/silverlightslideshow/Release/ProjectReleases.aspx?ReleaseId=9559 Please make sure you download the Version 1.0 files as opposed to the 2.0 Preview. Once you've downloaded the files and extracted, you should see a folder structure similar to the figure below.
The five JavaScript files in the folder are the powerhouse behind the Silverlight magic. The Scene.xml provides the base for the SilverLight application and the SlideShow. The Default.html is a page that allows you to customize the SlideShows look and feel, and then outputs JavaScript for you to create the SlideShow application.
The first thing we're going to do is upload these files to either a subdirectory on the site, or a document library. For this example, I am going to use SharePoint Designer to upload the files to a scripts directory on my webserver. If it does not exist already, create the scripts folder by right clicking on the websites root element and selecting New -> Folder and naming it scripts. Once the folder is created, it is simple as drag and drop into the folder from the Slideshow folder locally.
You can see the scripts have been successfully loaded onto the SharePoint site in the Scripts folder. You can also see that I've uploaded the Scene.xml file to the root directory of the web site. You'll need to remember this for later, though I'll reference it when it becomes necessary. Now that we have all the files on the web server, its time to start modifying the page on which the SlideShow is going to be presented.
Modifying the Web Part
So we have the files on the server, now we need to create a page if we're not modifying an existing page to display the SlideShow. What I've done is create a demo page in a Web Page Library called SlideShowDemo.aspx. Now that this page is created, I'll open it in designer so I can start making the changes necessary to function as a data source for the SilverLight SlideShow.
As you can see I have an empty page waiting to be modified. From here I go to the Data Source Library and select SharePoint Libraries. Listed below is the Pictures Library. Click on Pictures under SharePoint Libraries and select "Show Data". You should see a view on the Data Source Details Tab that is similar to below. What is interesting on the tab is the Insert Selected Fields as button. Its here that you'll want to click and select Multiple Item Form.
From here you should see a very basic list of the files that are located in the Pictures Document Library. See Below.
Here is where it gets tricky. We're going to go behind the scenes and modify the CAML to output the data from SharePoint in a format required as a data source for the SlideShow.
<slides baseUrl="Images/">
<slide imageUrl="image1.jpg" thumbnailUrl="thumb1.jpg" />
<slide imageUrl="image2.jpg" caption="Image caption" />
</slides>
We'll get started on Part2 Tomorrow and I'll show you the modifications you need to do to the CAML to get the transformation correct.