WSS Demo

These pictures come from a SharePoint image library http://www.wssdemo.com/today but use a Data View web part to add each image to a SilverLight control.

Based on an SPS 2003 web part from
http://binaryjam.wordpress.com/2007/06/05/sharepoint-silverlight-image-library-viewer-part/

The advantage of using the DVWP is that there is no code to be deployed to the SharePoint server, just a few files that can be uploaded to a document library.

These pictures come from a SharePoint image library http://www.wssdemo.com/today but use a Data View web part to add each image to a SilverLight control.

Based on an SPS 2003 web part from
http://binaryjam.wordpress.com/2007/06/05/sharepoint-silverlight-image-library-viewer-part/

The advantage of using the DVWP is that there is no code to be deployed to the SharePoint server, just a few files that can be uploaded to a document library.

Steps to create this on your own site using SharePoint Designer (no server access or web part installation required).

Assuming you have a SharePoint picture library already created. Copy any code below into notepad first.

1. Create a Document Library to hold your web part page and the required SilverLight files (set template to Web Part Page)
2. Create a folder called script in the document library
3. Copy the following files from http://www.codeplex.com/bjsspv/Release/ProjectReleases.aspx?ReleaseId=6444 into the script folder
   1. Createsilverlight.js
   2. Main.js
   3. Silverlight.js
   4. Scene.xaml
   5. Photoitem.xaml
4. Create a Web Part Page in the library
5. Edit the web part page in SharePoint Designer
6. Insert a Data View of your picture Library (just select one field from the data source view)
7. Set the data view layout to Plain Layout
   
8. Add the following code immediately before the <xsl:call-template name="dvt_1"/> tag in the <xsl:template match="/" section.

   <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript" src="script/CreateSilverlight.js"></script>
       <script type="text/javascript" src="script/Silverlight.js"></script>
       <script type="text/javascript" src="script/Main.js"></script>
       <div id="SilverlightControlHost">Loading...<script type="text/javascript">
           var localScene=new BinaryJamSFSPart.Scene('SilverlightControlHost', 'script');
           createSilverlight('SilverlightControlHost', 'script/Scene.xaml', 'SilverlightControl','640','520', localScene);
       </script>]]></xsl:text>
   

9. Replace the dvt_1 template with the following

           <xsl:template name="dvt_1">
               <xsl:variable name="dvt_StyleName">PlnTitl</xsl:variable>
               <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
               <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript">
               ]]></xsl:text>
               <xsl:call-template name="dvt_1.body">
                   <xsl:with-param name="Rows" select="$Rows" />
               </xsl:call-template>
               <xsl:text disable-output-escaping="yes"><![CDATA[</script></div>]]></xsl:text>
           </xsl:template>
   

10. Replace all the code between the <xsl:template name="dvt_1.rowview"> </xsl:template> with

    localScene.PhotoItemsUrls['<xsl:value-of select="position()-1"/>'] =  new BinaryJamSFSPartPhotoUrls('http://www.wssdemo.com<xsl:value-of select="@FileRef"/>','http://www.wssdemo.com/today/_t/<xsl:value-of select="substring-before(@LinkFilenameNoMenu,'.')" />_<xsl:value-of select="substring-after(@LinkFilenameNoMenu,'.')" />.jpg');
    
    This adds the image url and calculates the thumbnail for the image (_ext.jpg). Substitute www.wssdemo.com with your site url and Today with your picture library.
    

11. Save your page and view it in the browser (mouse over the bottom of the image to get the selector to display)