SharePoint Evolved

Blog

1/4/2009

Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

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="/">

<xsl:text disable-output-escaping="yes">

<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>

]]>

</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"/>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

<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>

</xsl:if>

<xsl:value-of select="format-number(@ID, '#,##0.#;-#,##0.#')"/>

</td>

<xsl:value-of select="@ContentType"/>

</td>

<xsl:value-of select="ddwrt:FormatDate(string(@Created), 1033, 5)"/>

</td>

<xsl:value-of select="@Author" disable-output-escaping="yes"/>

</td>

<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:

</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:

Directly after this code block, you'll want to paste in the following code:

</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="/">

<xsl:text disable-output-escaping="yes">

<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>

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

Posted at 18:48 by Isaac Stith | Category: Microsoft SharePoint; Silverlight | Permalink | Email this Post | Comments (30)

Technorati Tags

Microsoft SharePoint | Silverlight

Comments

Nice content, love the SharePoint Designer focus

Isaac,
I love the XSLT code for SharePoint Designer. Great example of integrating Silverlight easily with SharePoint.
I suggest some kind of code formatting, though. Are you using a <pre> tag right now?
-Tom

at 1/8/2009 17:07

Agreed

No, But you're right I should. I've been copying the code in from Visual Studio.

Isaac Stith at 1/8/2009 18:12

Blank page

I cant seem to get the slideshow to display. Page comes up blank. The list view displayed correctly as shown in your instructions, but once I started editing the code, things went pear shaped. Also, I noticed your thumbnail URL above goes to /Pictures/_t. I changed this according to the name of my picture gallery.

What info can I give you to possibly get some help here? WOuld really appreciate it :)

at 1/14/2009 4:51

Helps on the way

Sure, can you send me the snipped of javascript that it outputs?

Also if you have server access, you can install the solution.

Email: me[AT]isaacstith.com

Isaac Stith at 1/14/2009 7:56

no function

where is the mistake?

at 1/22/2009 14:54

follow up to my last post

just wanted to let you know that I ended up deploying the solution and it worked fine.
I could not get the method in your instructions to work but I'm sure I was doing something wrong.
Thank you for putting this together!

at 1/23/2009 20:32

Scripts

Have you checked to see that the link to the scripts is valid from where you have deployed the slideshow?

Another thing is in the CreateSlideShow.js, there is a link that says 'Scene.xaml', this should be the relative path to that file.

Outside that, feel free to drop me a line, and we can see if we can work it out.

You can reach me at me[at]isaacstith.com

Isaac Stith at 1/23/2009 23:08

scripts response

I got it to work by putting all of the source files in the root directory and removing any path information, (just left the file name). This means that I obviously had a path missing or typed incorrectly somewhere.

This webpart is exactly what I was looking for! I preferred the code version, because that way I could modify the display/sort order. We are using it on our internal sharepoint deployment. Our users can upload images. The display order is sorted by "modifed date". That way, the most recently uploaded pics show first in the slideshow order.

again, thank you for putting this together!

at 1/26/2009 17:45

odd error in IE with Google Toolbar

I posted before about succesfully getting this we part to work. We have deployed this solution onto our intranet sharepoint site and it is very popular!
We have come across a strange issue and I'm not sure if there is a work around or not.

If a user goes to the page, and has the google toolbar enabled, (in IE), a brief message shows up in the status bar;
"Please wait while scripts are loaded"
Then an error:
"Object doesn't support this property or method".
The webpart will show up blank.

At first I thought this was a script access issue, but as it turns out, it was only happening to people with the google toolbar enabled.
After disabling the google toolbar, the user can see the slide show fine.

Any ideas as to why this would happen?

at 2/5/2009 20:30

That is Odd

Chris,

I'm unsure. I'm not that familiar with Google Toolbar. There might be a number of factors that could be affecting it. It could be manipulating the javascript, which is most likely. It could also be interfering with the loading of Silverlight. Do other Silverlight sites, ie Mike G's web videos, work with the toolbar enabled?

Isaac

Isaac Stith at 2/9/2009 17:57

Great Job

It's work like magic, but I was wondering is there any way to change the behavior when I click on save icon near full screen icon, by default it takes you to the image itself I want to edit it so it takes me to specific page instead
Thanx

at 2/15/2009 13:31

Re:Great Job

Thanks for the feedback, The source is available from the firstfloor website:
http://firstfloorsoftware.com/slideshow/silverlight-slideshow/

You map be able to change the behavior in there.

Isaac

Isaac Stith at 2/15/2009 17:46

multiple galleries

Can this be converted in to a custom web part so multiple galleries can be created by the end user. Or how would you suggest to create multiple galleries with this method.

btw...loved your tut....cheers

at 3/12/2009 3:24

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

Yes it can, you're talking about on the same page correct?

You can use a drop down connected to the gallery webpart to change the slide data

Isaac Stith at 3/12/2009 21:37

Great Job

Great Job man, i love it ... it worked for me but after a 30 minute suffering, i've noticed that there was a path problem, and after putting all files in the same directory it worked for me. many thanks...

at 4/1/2009 7:24

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

Is this compatible with IE 6?

at 4/1/2009 16:24

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

I got it to work fine in IE 7 but when I tested in IE6 I got the following error:
Silverlight error message
ErrorCode: 2104
ErrorType: InitalizeError
Message: 2104 An error has occurred.

Can anyone help me?
Thanks

at 4/1/2009 16:30

linking to images from My Site

Issac,

Thank you for the great walkthrough. I was able to get it working with picture library without any problem.

In my case, I modified this a bit to work with an XML file as a data source instead of picture library. The XML file is generated by a application that uses the user profile web services and pulls all the images from profile pictures from the my site of different employees. The generated XML is then uploaded into a specific document library automatically by the app.

With this approach the silverlight web part can be placed on any site and references the XML file in the specific location.
The silverlight control is able to render the profile images.

I have a problem with the theme stack. When the last image is reached, it does not place the first image back on top of the stack although the thumbnail caption and title changes. I have only 3 images for testing purpose.

Any suggestions on how to get this working?

Thanks

at 4/3/2009 22:46

Blank Page

I cant seem to get the slideshow to display. Page comes up blank. The list view displayed correctly as shown in your instructions, any information would be helpful.

Thanks

at 4/14/2009 19:46

Blank Page

I have successfully added all the code and scripts everything appears to be correct but my page comes up blank, am I missing something?

Any help would be greatly appreciated

at 4/14/2009 20:27

Blank Page

I have successfully added all the code and scripts everything appears to be correct but my page comes up blank, am I missing something?

Any help would be greatly appreciated

at 4/14/2009 20:29

Re

I'm not sure how to change the theme stack. Can you copy me the xml that is generated?

Re:blank page
Can you copy me output of the page you're working on? Also check and make sure the relative path is good to the XML file in the Javascript.

My email is:
me[remove[AT]remove]isaacstith[dawt]com

at 4/15/2009 10:57

Not showing in IE8

Just wondering if anyone has had problems displaying the slideshow in Internet Explorer 8.

Some people (that have IE8) are saying that the slideshow that I have created is not displaying. They were prompted to install Silverlight, which was done......then nothing is displayed.

Any thoughts????

at 4/29/2009 2:37

Not working for me either

I am getting just a blank page with a webpart tile of "Photos", which is the name of my library, and nothing else. You can see the result in the web page link from the URL Comment field if you'd like to see what I'm talking about.

Based on the other posts, I tried changing paths, moving files to all the same folder etc, with no luck. I tried hard-coding the entire path to the scripts, and that actually resulted in the following error:

Silverlight error message
ErrorCode: 2104
ErrorType: InitalizeError
Message: 2104 An error has occurred.

I am using Internet Explorer 8, and already had SilverLight installed.

Thanks for any assistance you can provide--this looks really cool so I'm hoping I can get it to work. Unfortunately, in my hosted SharePoint environment I cannot install web parts, so this code is my only shot :(

at 6/2/2009 15:08

Not working for me either

at 6/2/2009 15:08

Not working for me either

at 6/2/2009 15:09

Drop down option for multiple folder photo libraries

Hello

Please could you expand a bit more on the drop down option for different picture libraries. I was able to follow what you have put here and it works great but I dont understand it. Is there any chance you can let me know the steps to get the drop down bit. Our schools want to use it like a photo album.
cheers
Ian

at 7/30/2009 19:24

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

at 7/30/2009 19:24

Help!

I have the same problem as other users who could not load the solution. I just see a blak page with Title blocl of a Data part. Did I miss any customization that author assumed but did not spell out?

I have a particular question about author's comment:

"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"?>
___________
Where this "source is located? I looked and looked and I can't find anywhere "scrip id" line.... Help! Thank you in advance for your response, I wish I could be on the other side with all the wow! and great! Obviously it works for many....

at 10/1/2009 22:17

blog comments powered by Disqus

Blog

Blog

1/4/2009

Inserting the Code

Customizing the SlideShow

You've done it! Save and Preview Your Work!

Comments

Nice content, love the SharePoint Designer focus

Agreed

Blank page

Helps on the way

no function

similar problem

follow up to my last post

Scripts

scripts response

odd error in IE with Google Toolbar

That is Odd

Great Job

Re:Great Job

multiple galleries

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

Great Job

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

linking to images from My Site

Blank Page

Blank Page

Blank Page

Re

Not showing in IE8

Not working for me either

Not working for me either

Not working for me either

Drop down option for multiple folder photo libraries

Re: Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

Help!