Error

Web Part Error: An error has occurred. Correlation ID: 72b2d79c-b3c5-00f2-6197-6510bcd6db7d.

Mouse over the bottom of the image above to select other images.

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.

 

Here is another Silverlight web part showing the same pictures in a slideshow http://www.wssdemo.com/SlideShow/show.aspx

 

 How to build the Silverlight web part

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

Note: Copy any code below into notepad first. Only PNG and JPG are supported by Silverlight 1.0.

Assuming you have a SharePoint picture library already created.

  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. Important: If your picture library is in a sub site, the first URL should be to your root site collection, not the sub site.

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

Overview of XSL Template changes
Logical XSL sections