Troubleshooting Slide.Show

Dec 19, 2007 at 12:12 AM
Hi all,

I am attempting to use this gallery to display pics of my family.

Here is my default.html code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<title>Test</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="SlideShow.js"></script>
</head>
<body>
<div style="height: 600px; width: 800px">
<script type="text/javascript">
// new SlideShow.Control(); -- shows black background
// new SlideShow.Control(new SlideShow.XmlConfigProvider({ url: "Configuration.xml" })); -- doesnt work
new SlideShow.Control(new SlideShow.Control(new SlideShow.XmlConfigProvider({ url: "Configuration.xml" })); //doesnt work either
</script>

</div>
</body>
</html>

Here is the XML code(Configuration.xml):
<?xml version="1.0" encoding="utf-8" ?>
- <configuration width="366" height="244" background="Silver">
- <modules>
- <module type="SlideViewer">
<option name="bottom" value="0" />
</module>
<module type="ProgressBar" />
- <module type="SlideDescription">
<option name="top" value="2" />
<option name="left" value="2" />
<option name="right" value="2" />
<option name="backgroundFill" value="#536987" />
<option name="backgroundOpacity" value="0.5" />
<option name="backgroundRadius" value="4" />
<option name="titleOpacity" value="0" />
<option name="descriptionPaddingTop" value="0" />
<option name="descriptionOpacity" value="0" />
</module>
- <module type="NavigationTray">
<option name="background" value="#F3F4F8" />
<option name="initialFadeTimout" value="5000" />
<option name="fadeOpacity" value="0" />
<option name="fadeInAnimationDuration" value="0.3" />
<option name="fadeOutAnimationDuration" value="1" />
<option name="slideAnimationDuration" value="0.5" />
<option name="container.width" value="320" />
<option name="slideShowNavigation.loopAlbum" value="true" />
<option name="albumViewer.background" value="Silver" />
<option name="albumViewer.pageContainer.itemWidth" value="222" />
<option name="albumViewer.pageContainer.itemHeight" value="84" />
<option name="albumViewer.pageContainer.padding" value="20" />
<option name="albumViewer.pageContainer.spacing" value="10" />
<option name="albumViewer.albumButton.background" value="#273B5B" />
<option name="albumViewer.albumButton.backgroundHover" value="#6A75A2" />
<option name="albumViewer.albumButton.radius" value="6" />
<option name="albumViewer.albumButton.stroke" value="#F3F4F8" />
<option name="albumViewer.albumButton.strokeThickness" value="0" />
<option name="albumViewer.albumButton.imageWidth" value="80" />
<option name="albumViewer.albumButton.imageHeight" value="70" />
<option name="albumViewer.albumButton.imagePaddingTop" value="7" />
<option name="albumViewer.albumButton.imagePaddingLeft" value="7" />
<option name="albumViewer.albumButton.imageBackground" value="#BEBFC1" />
<option name="albumViewer.albumButton.imageRadius" value="4" />
<option name="albumViewer.albumButton.imageStroke" value="Silver" />
<option name="albumViewer.albumButton.titlePaddingTop" value="5" />
<option name="albumViewer.albumButton.titlePaddingLeft" value="7" />
<option name="albumViewer.albumButton.titleForeground" value="#F3F4F8" />
<option name="albumViewer.albumButton.descriptionPaddingLeft" value="7" />
<option name="albumViewer.albumButton.descriptionForeground" value="Silver" />
<option name="albumViewer.albumNavigation.width" value="120" />
<option name="albumViewer.albumNavigation.fontSize" value="11" />
<option name="albumViewer.albumNavigation.previousButton.pathFill" value="#8D9AB4" />
<option name="albumViewer.albumNavigation.previousButton.pathFillDisabled" value="Transparent" />
<option name="albumViewer.albumNavigation.nextButton.pathFill" value="#8D9AB4" />
<option name="albumViewer.albumNavigation.nextButton.pathFillDisabled" value="Transparent" />
<option name="thumbnailViewer.left" value="98" />
<option name="thumbnailViewer.width" value="150" />
<option name="thumbnailViewer.viewerBackgroundFill" value="#DEE1E5" />
<option name="thumbnailViewer.thumbnailButton.stroke" value="#DEE1E5" />
<option name="thumbnailViewer.thumbnailButton.imageBackground" value="#BEBFC1" />
<option name="thumbnailViewer.thumbnailNavigation.previousPageButton.pathFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailNavigation.previousPageButton.pathFillDisabled" value="Silver" />
<option name="thumbnailViewer.thumbnailNavigation.nextPageButton.pathFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailNavigation.nextPageButton.pathFillDisabled" value="Silver" />
<option name="thumbnailViewer.thumbnailPreview.stroke" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailPreview.arrowFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailPreview.imageBackground" value="#BEBFC1" />
</module>
</modules>
- <transitions>
<transition type="FadeTransition" name="CrossFadeTransition" />
<transition type="ShapeTransition" name="CircleOutTransition" />
<transition type="SlideTransition" name="SlideLeftTransition" />
- <transition type="SlideTransition" name="SlideDownTransition">
<option name="direction" value="Down" />
</transition>
- <transition type="WipeTransition" name="WipeRightTransition">
<option name="direction" value="Right" />
</transition>
</transitions>
- <dataProvider type="XmlDataProvider">
<option name="url" value="Data.xml" />
</dataProvider>
</configuration>

Here is my data.xml:
<?xml version="1.0" encoding="utf-8" ?>
- <data transition="CrossFadeTransition">
- <album title="Pictures of Bryn" description="He's my dog">
<slide title="Bryn" description="Bryn is a Boxer Dalmation Cross" image="DSC_0613.JPG" />
</album>
</data>

Please help

Brian
Coordinator
Dec 19, 2007 at 7:18 AM
Edited Dec 20, 2007 at 5:36 PM
Brian, here's how I would go about troubleshooting your issue:

1. Download the latest release (or source code). Ensure that the Slide.Show project (in the solution) is a Web site or virtual directory (e.g. in IIS), which is done for you if you are using Visual Studio 2005/2008. Verify that both the "Typical" and "Vertigo" samples work for you.

The key point to note is that Slide.Show will not work if you simply unzip the release/source code to your desktop and double-click the samples. The Slide.Show control needs to be hosted on a page in a real Web site because it uses the Silverlight Downloader object.

2. If the samples work for you, then it's most likely an invalid file path in your script tags, or an invalid URL specified for the XmlConfigProvider or XmlDataProvider. In your case, it appears that you are specifying all your files without paths, and therefore you would need to have the following files in the same folder as your page:
  • Silverlight.js
  • SlideShow.js
  • Configuration.xml
  • Data.xml
3. If the samples are working for you, and if you've verified that all of your file paths are correct, then it's most likely an issue with your configuration and/or data files, although 9 out of 10 times you would receive some sort of obvious visual error (e.g. an XML parsing or JavaScript error). If this case, I'd strongly recommend starting over and following the step-by-step Quick Start Guide.

Please let me know how it goes and if you have further troubles, feedback, or questions. Good luck!
Dec 21, 2007 at 11:47 PM
Thanks for the reply. I have the 4 files you listed above in the same folder. However, it is somewhat working. When I launch within IE 7 I can see the background inside the silverlight plugin. I can modify the color and it changes no problem. I am also see an overlay up top. But thats it. What else could be breaking it?

Thanks,
Brian
Dec 21, 2007 at 11:51 PM
Here is the code from the files. All files are in one folder.

Default.html:
<td>
<script type="text/javascript">
new SlideShow.Control(new SlideShow.XmlConfigProvider({ url: "Configuration.xml" }));
</script>
</td>

Data.xml:

<data transition="CrossFadeTransition">
<album title="Seattle_Arboretum" description="Photos taken by The Walters">
<slide title="Ali 112.JPG" description="Photos taken by The Walters" image="Maui 003.jpg" />
</album>
</data>

Configuration.xml:

<?xml version="1.0" encoding="utf-8" ?>
<configuration width="800" height="600" background="black">
<modules>
<module type="SlideViewer">
<option name="bottom" value="0" />
</module>
<module type="ProgressBar" />
<module type="SlideDescription">
<option name="top" value="2" />
<option name="left" value="2" />
<option name="right" value="2" />
<option name="backgroundFill" value="#536987" />
<option name="backgroundOpacity" value="0.5" />
<option name="backgroundRadius" value="4" />
<option name="titleOpacity" value="0" />
<option name="descriptionPaddingTop" value="0" />
<option name="descriptionOpacity" value="0" />
</module>
<module type="NavigationTray">
<option name="background" value="#F3F4F8" />
<option name="initialFadeTimout" value="5000" />
<option name="fadeOpacity" value="0" />
<option name="fadeInAnimationDuration" value="0.3" />
<option name="fadeOutAnimationDuration" value="1" />
<option name="slideAnimationDuration" value="0.5" />
<option name="container.width" value="320" />
<option name="slideShowNavigation.loopAlbum" value="true" />
<option name="albumViewer.background" value="Silver" />
<option name="albumViewer.pageContainer.itemWidth" value="222" />
<option name="albumViewer.pageContainer.itemHeight" value="84" />
<option name="albumViewer.pageContainer.padding" value="20" />
<option name="albumViewer.pageContainer.spacing" value="10" />
<option name="albumViewer.albumButton.background" value="#273B5B" />
<option name="albumViewer.albumButton.backgroundHover" value="#6A75A2" />
<option name="albumViewer.albumButton.radius" value="6" />
<option name="albumViewer.albumButton.stroke" value="#F3F4F8" />
<option name="albumViewer.albumButton.strokeThickness" value="0" />
<option name="albumViewer.albumButton.imageWidth" value="80" />
<option name="albumViewer.albumButton.imageHeight" value="70" />
<option name="albumViewer.albumButton.imagePaddingTop" value="7" />
<option name="albumViewer.albumButton.imagePaddingLeft" value="7" />
<option name="albumViewer.albumButton.imageBackground" value="#BEBFC1" />
<option name="albumViewer.albumButton.imageRadius" value="4" />
<option name="albumViewer.albumButton.imageStroke" value="Silver" />
<option name="albumViewer.albumButton.titlePaddingTop" value="5" />
<option name="albumViewer.albumButton.titlePaddingLeft" value="7" />
<option name="albumViewer.albumButton.titleForeground" value="#F3F4F8" />
<option name="albumViewer.albumButton.descriptionPaddingLeft" value="7" />
<option name="albumViewer.albumButton.descriptionForeground" value="Silver" />
<option name="albumViewer.albumNavigation.width" value="120" />
<option name="albumViewer.albumNavigation.fontSize" value="11" />
<option name="albumViewer.albumNavigation.previousButton.pathFill" value="#8D9AB4" />
<option name="albumViewer.albumNavigation.previousButton.pathFillDisabled" value="Transparent" />
<option name="albumViewer.albumNavigation.nextButton.pathFill" value="#8D9AB4" />
<option name="albumViewer.albumNavigation.nextButton.pathFillDisabled" value="Transparent" />
<option name="thumbnailViewer.left" value="98" />
<option name="thumbnailViewer.width" value="150" />
<option name="thumbnailViewer.viewerBackgroundFill" value="#DEE1E5" />
<option name="thumbnailViewer.thumbnailButton.stroke" value="#DEE1E5" />
<option name="thumbnailViewer.thumbnailButton.imageBackground" value="#BEBFC1" />
<option name="thumbnailViewer.thumbnailNavigation.previousPageButton.pathFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailNavigation.previousPageButton.pathFillDisabled" value="Silver" />
<option name="thumbnailViewer.thumbnailNavigation.nextPageButton.pathFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailNavigation.nextPageButton.pathFillDisabled" value="Silver" />
<option name="thumbnailViewer.thumbnailPreview.stroke" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailPreview.arrowFill" value="#8D9AB4" />
<option name="thumbnailViewer.thumbnailPreview.imageBackground" value="#BEBFC1" />
</module>
</modules>
<transitions>
<transition type="FadeTransition" name="CrossFadeTransition" />
<transition type="ShapeTransition" name="CircleOutTransition" />
<transition type="SlideTransition" name="SlideLeftTransition" />
<transition type="SlideTransition" name="SlideDownTransition">
<option name="direction" value="Down" />
</transition>
<transition type="WipeTransition" name="WipeRightTransition">
<option name="direction" value="Right" />
</transition>
</transitions>
<dataProvider type="XmlDataProvider">
<option name="url" value="Data.xml" />
</dataProvider>
</configuration>
Coordinator
Dec 22, 2007 at 12:22 AM

brianwalters wrote:
<option name="thumbnailViewer.viewerBackgroundFill" value="#DEE1E5" />

This could be the offending line. We updated the source code recently (last week) to remove the viewerBackgroundFill option and make viewerBackground a child control. If you happen to be using an older configuration file with the newer source code, then this could be causing your problem.

Can you try changing the above line to the following line and let me know how it goes?

<option name="thumbnailViewer.viewerBackground.fill" value="#DEE1E5" />
Jan 16, 2008 at 12:29 AM
Edited Jan 16, 2008 at 2:20 AM


billyzkid wrote:

brianwalters wrote:
<option name="thumbnailViewer.viewerBackgroundFill" value="#DEE1E5" />

This could be the offending line. We updated the source code recently (last week) to remove the viewerBackgroundFill option and make viewerBackground a child control. If you happen to be using an older configuration file with the newer source code, then this could be causing your problem.

Can you try changing the above line to the following line and let me know how it goes?

<option name="thumbnailViewer.viewerBackground.fill" value="#DEE1E5" />


I read with interest the availability of what looks like an excellent slide show package.

I think that I followed the "Quick Start Guide" carefully and completely, but all I get is a nice (green) rectangle where the "goodies" should be. (I changed the width, height and background as you can see in the Configuration XML file.)

Here's a slightly abbreviated version of the major pieces:

The HTM page:
==========
Do not apply formatting
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>my own custom title</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>

The Configuration XML:
===============
Do not apply formatting
<?xml version="1.0" encoding="utf-8" ?>
<configuration width="648" height="600" background="Green">
<modules>
<module type="SlideViewer" />
<module type="ProgressBar" />
<module type="SlideDescription" />
<module type="NavigationTray">
<option name="thumbnailViewer.left" value="83" />
</module>
</modules>
<transitions>
<transition type="FadeTransition" name="CrossFadeTransition" />
<transition type="WipeTransition" name="WipeRightTransition">
<option name="direction" value="Right" />
</transition>
</transitions>
<dataProvider type="XmlDataProvider" />
</configuration>

The Data.xml file:
===========
Do not apply formatting
<?xml version="1.0" encoding="utf-8" ?>
<data transition="CrossFadeTransition">
<album
title="Taste of Hawaii - 2007"
description="Taste of Hawaii - 2007 Slide Show"
image="Images_2007/Album1.jpg">
<slide
title="Aloha Trio"
description="The Aloha Trio - one of 15 Musical Groups to Entertain"
image="Images_2007/Dsc1643.jpg"
thumbnail="Images2007/Dsc1643thm.jpg" />
more interations left out
</album>
</data>

I have included the SilverLight.js and SlideShow.js files in the same sub-directory as all of the above and the "Images_2007" is also a sub-directory of the same parent.

Many thanks in advance for any observations/clues. As I said, it demos like a really nice feature and I'd love to be using it.

mahalos ... :) KevInKauai

P.S. Have tried this in VWD2005 (local), on GoDaddy Windows hosting and on UltimaHosts WIndows hosting. No error messages are shown in any of these three scenarios -- just the plain green rectangle (and no other hints of controls as would seem to be indicated by the 4th page of the Guide).
Coordinator
Jan 16, 2008 at 4:59 AM
Edited Jan 16, 2008 at 5:00 AM
@KevInKauai, are you testing your slideshow in a real Web site? It won't work if you are just trying to run the slideshow directly off your desktop, for example. It needs to be a real site (i.e. http://, not file://) because the Silverlight Downloader object is used to retrieve the XML configuration and data files from the server.
Jan 16, 2008 at 7:03 AM
Edited Jan 16, 2008 at 10:17 AM


billyzkid wrote:
@KevInKauai, are you testing your slideshow in a real Web site? It won't work if you are just trying to run the slideshow directly off your desktop, for example. It needs to be a real site (i.e. http://, not file://) because the Silverlight Downloader object is used to retrieve the XML configuration and data files from the server.


BillyZ-

By "locally" I meant that I created an HTML page (as in the Guide) within the existing ASP.NET project where I would like to use Slide.Show. My first test was invoking that page (from an ASPX page through a button) within the quasi-server the VWD2005 provides. My second and third tests were run on a "real" site (on hosted at GoDaddy and the second on an UltimatHosts account. None of the three tests produced anything except a solid green rectangle.

I hope this clarifies.

Thanks for you attention. :) KevInKauai

P.S. I'm doing this in ASP.NET 2.0 but in (just now) viewing "gobstopper10.wmv" (which carries the more formal title "ASP.NET 3.5 Tutorial Videos") the instructor is using VS 2008 and started out by mentioning the 3.5 Framework. Is that a requirement for this Slide.Show?
Coordinator
Jan 16, 2008 at 5:34 PM
Edited Jan 16, 2008 at 5:36 PM
@KevInKauai, you're doing exactly what I'd recommend next by watching the HOWTO video. The video has a complete walkthru for adding Slide.Show to an ASP.NET application.

To answer your last question, Slide.Show does not require the ASP.NET 3.5 framework at all. In fact, it doesn't even require .NET or ASP.NET! It's entirely a client-side application that only requires Silverlight 1.0 (or higher) installed on the client machine. The control can be deployed just using simple HTML pages, just like the samples are using in the source code.
Jan 17, 2008 at 10:23 AM
At this point, I'm totally at a loss to explain why I get NO RESULTS other than a green rectangle. I've even stripped out the ASP.NET and XLM headers (as the examples do not include any of the "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" or "<?xml version="1.0" encoding="utf-8" ?>" version info that you get when instantiating an ASP.NET HTML or XML file.

And STILL, all I have is a PLAIN silver rectangle (after reverting the first line to exactly what is in the example) -- NO sign of controls of anything other than the rather uninteresting rectangle.

THe GUIDE has
new SlideShow.Control(new SlideShow.XmlConfigProvider());

but the file is named "Configuration.xml" so WHERE is the connection here?

FURTHER, that XML file has "<dataProvider type="XmlDataProvider" />" but the file is named "Data.xml" so HOW is that CONNECTED? To me, the ordinary rules of names following things just doesn't make sense here -- or am I missing some "magic"?

I have those three files (SS1.htm, Configuration.xml and Data.xml) in a directory on a server site, along with the "Silverlight.js" and "SlideShow.js" files and it's just NOT working. (There is an Images directory which contains the files references in the "Data.xml" file but those are not showing up, of course.)

WHAT AM I CONTINUING TO MISS?

mahalos in advance again ... :) KevInKauai
Jan 18, 2008 at 7:06 PM
Hi Kevin,

I am a novice .NET programmer. I installed VWD2008 this morning, followed the start page to this neat program and was having problems, so I read this post.

My issue was that I could only see a black window using the quick start guide. When I tried to get to the next step and see a formatted (but empty) slideshow, the black window would disappear and I was left with nothing.

I took billyz advice and watched the video. I had to pause the video several times and make sure I did it exactly as the instructor said. Made many silly errors but it finally worked for me.

Here is how I did it...
(1) Downloaded the free slide.show project.
(2) Created these 3 files
a) Default.aspx and placed it in the root of the project
b) Configuration.xml and placed it in the "Scripts/Release" folder (which is where Silverlight.js and SlideShow.js reside)
c) Data.xml and placed it in the "Scripts/Release" folder
(3) Watched the video carefully for the first 8 minutes and 37 seconds

Add these line to the head of Default.aspx
<script type="text/javascript" src="Scripts/Release/Silverlight.js"></script>
<script type="text/javascript" src="Scripts/Release/SlideShow.js"></script>
Add these lins to the body of Default.aspx
<script type="text/javascript">
new SlideShow.Control(new SlideShow.XmlConfigProvider({ url:"Scripts/Release/Configuration.xml" }));
</script>

Complete Configuration.xml file
<?xml version="1.0" encoding="utf-8" ?>
<configuration width="600" height="400" background="Silver">
<modules>
<module type="SlideViewer" />
<module type="ProgressBar" />
<module type="SlideDescription" />
<module type="NavigationTray">
<option name="thumbnailViewer.left" value="83" />
</module>
</modules>
<transitions>
<transition type="FadeTransition" name="CrossFadeTransition" />
<transition type="WipeTransition" name="WipeRightTransition">
<option name="direction" value="Right" />
</transition>
</transitions>
<dataProvider type="XmlDataProvider">
<option name="url" value="Scripts/Release/Data.xml" />
</dataProvider>
</configuration>

Complete Data.xml file
<?xml version="1.0" encoding="utf-8" ?>
<data transition="WipeRightTransition">
<album title="Flowers">
<slide image="Images/s01.jpg" />
<slide image="Images/s02.jpg" />
<slide image="Images/s03.jpg" />
<slide image="Images/s04.jpg" />
<slide image="Images/s05.jpg" />
<slide image="Images/s06.jpg" />
<slide image="Images/s07.jpg" />
<slide image="Images/s08.jpg" />
<slide image="Images/s09.jpg" />
<slide image="Images/s10.jpg" />
</album>
</data>

Good Luck
Jan 19, 2008 at 9:26 PM
Hey guys, for anybody having trouble still, I'm was playing with it for the past five hours, following the video. I am using Visual Web Developer 2005 Express Edition, and I couldn't get it working properly. Then it dawned on me, why not try clearing the chace like your supposed to? It now has gotten past the step where you see the UI and the grey background, and it successfully loads the images. Hope this helps:-)
Coordinator
Jan 19, 2008 at 11:46 PM
@Sunflash, thanks for suggesting the "clear cache" trick again. It's not very intuitive, but that's how the browser works with XML files by default.

Please remember that if you make changes to the configuration and data XML files used by Slide.Show and you are trying to test your changes, you'll most likely need to clear your cache first. The way this is easily done in IE7 is through the Tools > Delete Browsing History... menu, then by clicking the Delete files... button.