Silverlight Slide Show in SharePoint

Introduction

This article explains how to display Silverlight powered slide show in SharePoint using Slide.Show. Vertigo Software has released this full-featured interactive open source Silverlight 1.0 control for publishing photo slides on the web. Slide.Show version 2 is also available in CodePlex which is a Silverlight 2.0 control.

Download Slide.Show from CodePlex.

This article uses Slide.Show – Version 1 to display silverlight powered slide show in a SharePoint page.

HTML Page

Create a basic html page and add the following HTML source. Upload this HTML file to the document library/ Pages Library.

<html> 
  <head> 
    <title>Silverlight slide show in SharePoint using Slide.Show</title> 
    <script type="text/javascript" src="Silverlight.js"></script> 
    <script type="text/javascript" src="SlideShow.js"></script> 
  </head> 
<body> 
<script type="text/javascript"> 
  new SlideShow.Control(new SlideShow.XmlConfigProvider()); 
</script> 
</body> 
</html>

If you want to display the slide show in your home site then add a “Page Viewer WebPart” and point the created html from document library.

Document Library / Pages Library

Create a folder in document library of SharePoint site to store HTML and other files and also created two XML files Configuration.xml and Data.xml in the same location. I have used the Pages Library of my publishing site.

Configuration.xml

This file holds all configuration details like width, height, background, modules and transition information.

Please refer the Quick Start Guide from CodePlex for understanding the schema of Configuration.xml and Data.xml.

Data.xml

Use Data.xml to create albums and slides. Use SharePoint site’s Image Library to hold all the images. This file refers the images from Image Library. See the following sample Data.xml.

<data transition="CrossFadeTransition"> 
  <album 
    title="Album Title #1" 
    description="Album Description #1" 
    image="http://YourSite/ImageLibrary/Album1.jpg"> 
    <slide 
        title="Slide Title #1" 
        description="Slide Description #1" 
        image="http://YourSite/ImageLibrary/Album1/Image1.jpg"
        thumbnail="http://YourSite/ImageLibrary/Album1/Image1.jpg"/> 

    <slide 
        title="Slide Title #2" 
        description="Slide Description #2" 
        image="http://YourSite/ImageLibrary/Album1/Image2.jpg"
        thumbnail="http://YourSite/ImageLibrary/Album1/Image2.jpg"/>

    <slide 
        title="Slide Title #3" 
        description="Slide Description #3" 
        image="http://YourSite/ImageLibrary/Album1/Image3.jpg"
        thumbnail="http://YourSite/ImageLibrary/Album1/Image3.jpg"/>       

        ...
</album> 
...
</data>