We started off in Part 1 http://www.sharepointevolved.com/blog/Lists/Posts/Post.aspx?ID=27 , getting the page ready for the transformation. We have a view that is essentially a list view of the pictures in the Pictures Library.
Now we need to modify the CAML to get the data to Silverlight.
Inserting the Code
In the source view of the webpart, find the section that looks like the following code segment:
<xsl:template match="/">
<xsl:call-template name="dvt_1"/>
</xsl:template>
You'll want to replace it with the following code:
<xsl:template match="/">
<div id="slideshow" style="text-align:center">
<xsl:text disable-output-escaping="yes">
<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>
<script type="text/javascript" src="/scripts/SilverlightSpy.js"></script>
<script type="text/javascript" src="/scripts/SlideshowCreate.js"></script>
<script type="text/javascript" src="/scripts/Slideshow.js"></script>
<script type="text/javascript" src="/scripts/Slide.js"></script>
<style type="text/css">#slideshow{text-align:center;}</style>
]]>
</xsl:text>
</div>
<xsl:call-template name="dvt_1"/>
</xsl:template>
You'll notice that this is where we specify where the JavaScript files are located, so if you've uploaded them to a different location, you'll need to specify that location here in all five tags.
The Next step is to find the next code block:
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr valign="top">
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<th class="ms-vh" width="1%" nowrap="nowrap"></th>
</xsl:if>
<th class="ms-vh" nowrap="nowrap">ID</th>
<th class="ms-vh" nowrap="nowrap">Content Type</th>
<th class="ms-vh" nowrap="nowrap">Created</th>
<th class="ms-vh" nowrap="nowrap">Created By</th>
<th class="ms-vh" nowrap="nowrap">Modified</th>
</tr>
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</xsl:template>
You'll want to replace the code block with the following code:
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:text disable-output-escaping="yes"><script id="slides" type="text/xml"></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"></script></xsl:text>
</xsl:template>
This part of the code basically specifies the <script> tag for consumption by the SilverLight application. The next code block you need to look for is:
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview"/>
</xsl:for-each>
</xsl:template>
Which You'll need to replace with this one:
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:text disable-output-escaping="yes"><slides baseUrl=""></xsl:text>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview"/>
</xsl:for-each>
<xsl:text disable-output-escaping="yes"></slides></xsl:text>
</xsl:template>
This code specifies the <slides> tag for consumption. You'll need to change the next code block to get the final part of the transformation. The codeblock will be a large chunk of HTML, which looks like this:
<xsl:template name="dvt_1.rowview">
<tr>
<xsl:if test="position() mod 2 = 1">
<xsl:attribute name="class">ms-alternating</xsl:attribute>
</xsl:if>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb" width="1%" nowrap="nowrap">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</td>
</xsl:if>
<td class="ms-vb">
<xsl:value-of select="format-number(@ID, '#,##0.#;-#,##0.#')"/>
</td>
<td class="ms-vb">
<xsl:value-of select="@ContentType"/>
</td>
<td class="ms-vb">
<xsl:value-of select="ddwrt:FormatDate(string(@Created), 1033, 5)"/>
</td>
<td class="ms-vb">
<xsl:value-of select="@Author" disable-output-escaping="yes"/>
</td>
<td class="ms-vb">
<xsl:value-of select="ddwrt:FormatDate(string(@Modified), 1033, 5)"/>
</td>
</tr>
</xsl:template>
This large block of code will need to be replaced with =: You'll nee do replace /Pictures/_t/ with the relative path to your Picture Library
<xsl:template name="dvt_1.rowview">
<xsl:text disable-output-escaping="yes"><slide imageUrl="</xsl:text>
<xsl:value-of select="@FileRef"/>
<xsl:text disable-output-escaping="yes">" thumbnailUrl="/Pictures/_t/</xsl:text>
<xsl:value-of select="substring-before(@LinkFilenameNoMenu,'.')" />
<xsl:text>_</xsl:text>
<xsl:value-of select="substring-after(@LinkFilenameNoMenu,'.')" />
<xsl:text disable-output-escaping="yes">.jpg" caption="</xsl:text>
<xsl:value-of select="@Title"></xsl:value-of>
<xsl:text disable-output-escaping="yes">"/></xsl:text>
</xsl:template>
Once this is replaced, you've completed the necessary transformations required for the Picture Library to function as a data source for the SilverLight SlideShow. It will not show in the browser if you go your page, but if you view the source you'll see a scripts tag that looks similar to this, but obviously with your values:
<script id="slides" type="text/xml"><?xml version="1.0"?>
<slides baseUrl="">
<slide imageUrl="/Pictures/Corner face.JPG" thumbnailUrl="/Pictures/_t/Corner face_JPG.jpg" caption="Face in the Corner of one of the Ruins"/>
<slide imageUrl="/Pictures/Cozumel from ferry.JPG" thumbnailUrl="/Pictures/_t/Cozumel from ferry_JPG.jpg" caption="Picture of Cozumel from the Ferry heading to Playa Del Carmen"/>
<slide imageUrl="/Pictures/cozumel from ferry2.JPG" thumbnailUrl="/Pictures/_t/cozumel from ferry2_JPG.jpg" caption="Picture of Cozumel from the Ferry heading to Playa Del Carmen"/>
<slide imageUrl="/Pictures/cozumel4.JPG" thumbnailUrl="/Pictures/_t/cozumel4_JPG.jpg" caption="Picture of Cozumel from the end of one of the piers"/>
<slide imageUrl="/Pictures/cruise ships storm cloud sunset.JPG" thumbnailUrl="/Pictures/_t/cruise ships storm cloud sunset_JPG.jpg" caption="Cruise ships outside of cozumel with some storm clouds rolling in"/>
<slide imageUrl="/Pictures/Palm panicles.JPG" thumbnailUrl="/Pictures/_t/Palm panicles_JPG.jpg" caption="Pretty palm panicles"/>
<slide imageUrl="/Pictures/PC280055.JPG" thumbnailUrl="/Pictures/_t/PC280055_JPG.jpg" caption="View of one of the hotels near playa del carmen"/>
<slide imageUrl="/Pictures/PC280066.JPG" thumbnailUrl="/Pictures/_t/PC280066_JPG.jpg" caption="Flowers in the playa del carmen area"/>
<slide imageUrl="/Pictures/PC280067.JPG" thumbnailUrl="/Pictures/_t/PC280067_JPG.jpg" caption="more flowers from the playa del carmen area"/>
<slide imageUrl="/Pictures/Right corner face.JPG" thumbnailUrl="/Pictures/_t/Right corner face_JPG.jpg" caption="Another angle of the face in the corner"/>
<slide imageUrl="/Pictures/Tulum 02 Lookout.JPG" thumbnailUrl="/Pictures/_t/Tulum 02 Lookout_JPG.jpg" caption="Lookout spot in Tulum"/>
<slide imageUrl="/Pictures/Tulum main temple.JPG" thumbnailUrl="/Pictures/_t/Tulum main temple_JPG.jpg" caption="Main Temple in Tulum"/>
<slide imageUrl="/Pictures/Tulum sacred center.JPG" thumbnailUrl="/Pictures/_t/Tulum sacred center_JPG.jpg" caption="The Sacred Center of Tulum"/>
<slide imageUrl="/Pictures/Tulum south 2.JPG" thumbnailUrl="/Pictures/_t/Tulum south 2_JPG.jpg" caption="Southern view of Tulum"/>
<slide imageUrl="/Pictures/Tulum south.JPG" thumbnailUrl="/Pictures/_t/Tulum south_JPG.jpg" caption="Another southern view of Tulum"/>
<slide imageUrl="/Pictures/Tulum temple.JPG" thumbnailUrl="/Pictures/_t/Tulum temple_JPG.jpg" caption="Temple at Tulum"/>
<slide imageUrl="/Pictures/tulum_front.jpg" thumbnailUrl="/Pictures/_t/tulum_front_jpg.jpg" caption=""/>
</slides>
</script>
This big step has now been completed, and now we need to go back and modify one of the Javascript files to specify where the Scene.xml file is located. Back in SharePoint Designer, open up the file "SlideShowCreate.js". If you go to line 21, you'll see the following bit of code:
source: 'Scene.xml',
You need to specify the relative path to the Scene.xml file on your server. If you've uploaded it to the scripts directory under the root site it would be '/scripts/Scene.xml'. So insert the relative path here between the quotes for the script to work. For our purposes I am using
source: '/Scene.xml',
Since my file is located at the root level.
Customizing the SlideShow
Go back to the location where you originally extracted the zip file. Open up the default.html file in internet explorer, and acknowledge any security warnings that may come up. Allow Internet Explorer to run any blocked content, and start customizing away. You should see an interface like this:
Start with the basic options for now, and you can go back and customize the slideshow later once you have this up and running. If you select the customize button, the text box will be populated with javascript containing your options.
The final step is to go back to the source view of the SlideShow WebPage and find the following code block:
<style type="text/css">#slideshow{text-align:center;}</style>
Directly after this code block, you'll want to paste in the following code:
<script type="text/javascript">
</script>
And in between the two Script tags you'll want to paste the code given to you by the SlideShow customizer. So you will end up with the following code in your Source view.
<xsl:template match="/">
<div id="slideshow" style="text-align:center">
<xsl:text disable-output-escaping="yes">
<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>
<script type="text/javascript" src="/scripts/SilverlightSpy.js"></script>
<script type="text/javascript" src="/scripts/SlideshowCreate.js"></script>
<script type="text/javascript" src="/scripts/Slideshow.js"></script>
<script type="text/javascript" src="/scripts/Slide.js"></script>
<style type="text/css">#slideshow{text-align:center;}</style>
<script type="text/javascript">
createSlideshow('slideshow', {
width: '360',
height: '360',
slidesSource: '#slides',
background: '#202020',
buttonBackground: 'Black',
buttonForeground: 'White',
buttonBorderColor: 'White',
buttonPlayForeground: 'LightGreen',
captionBackground: 'Black',
captionForeground: 'White',
captionFontFamily: 'Verdana',
captionFontSize: 11,
captionFontStyle: 'Normal',
captionFontWeight: 'Normal',
captionOpacity: .7,
contentBackground: 'Black',
selectedThumbnailBorderColor: 'Yellow',
trackerForeground: 'Silver',
trackerFontFamily: 'Verdana',
trackerFontSize: 11,
trackerFontStyle: 'Normal',
trackerFontWeight: 'Normal',
borderRadius: 8,
padding: 8,
captionVisible: true,
thumbnailsVisible: true,
trackerVisible: true,
buttonOptions: BUTTON_PLAYPAUSE | BUTTON_PREVNEXT | BUTTON_PREVNEXTPAGE | BUTTON_FULLSCREEN | BUTTON_SAVE,
autoPlay: true,
slideSettings: {
speedRatio: 1,
theme: THEME_NONE
}});
</script>
]]>
</xsl:text>
</div>
<xsl:call-template name="dvt_1"/>
</xsl:template>
You've done it! Save and Preview Your Work!
At this point, you should have a functioning SlideShow on your page! Or you can view the example I've created here:
http://www.sharepointevolved.com/Pages/Slideshow.aspx
-Isaac Stith
http://www.sharepointevolved.com