Home > silverlight > Silverlight SlideShow

Silverlight SlideShow

Hello,friends.

This is my first blog writing.Today i used silverlight slideshow in project for photogallery.Here is an example of this slideshow.
http://www.mikeswanson.com/Slide.Show/default.htm

Here is a live example which i used in my project

http://www.swaminarayan.info/ViewEventsAlbum

Following are the steps to develope this slideshow.

The typical scenario involves the following steps:
Step 1. Determine the Web page to host the Slide.Show control
Step 2. Define a configuration file with the desired behavior and options for the control(i.e.configuration.xml file)
Step 3. Define a data file with the album and slide data for the control(i.e.Data.xml)

Details of all this is as below.

Step 1: Embed the control
At a minimum, a Web page hosting the Slide.Show control requires the following:

  • An external script tag that references the standard Silverlight.js file
  • An external script tag that references the Release version of the SlideShow.js file
  • An inline script tag that creates and embeds the Slide.Show control in the page

First, create a new page in your site with the following content:
<html>

<head>

<title>Slide.Show</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();

</script>

</body>

</html>

Next, view the page in the browser to make sure everything is wired up correctly. At this point, it’s just an empty slideshow as shown below:

Next, view the page in the browser to make sure everything is wired up correctly. At this point, it’s just an empty slideshow as shown below:

Figure 1. An empty slideshow

Step 2: Configure the control
To give substance to your empty slideshow, you’ll need to configure it. In the typical scenario, this is done via an XML configuration file. First, modify the inline script tag in your page as follows:

<script type=”text/javascript”>

new SlideShow.Control(new SlideShow.XmlConfigProvider());

</script>

Next, create a file named Configuration.xml in the same folder as your page with the following content:

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

  • The above configuration overrides the default width, height, and background color of the Slide.Show control, and then adds a few modules and transitions that will provide standard slideshow behavior.
  • Refresh your page in the browser to see the effect of the above configuration – now the control provides both basic and thumbnail navigation, buttons to toggle between album view and full-screen mode, and it will respond to the mouse by sliding in titles and descriptions from the top of the control.

Step 3: Provide data to the control
In the previous step, we configured the size, background color, and behavior of the Slide.Show control. In this final step, we’ll provide album and slide data to the control via an XML data file. First, modify the end of the configuration file as follows: … </transitions> <dataProvider type=”XmlDataProvider” /> </configuration>

Next, create a file named Data.xml in the same folder as your page with the following format: <data transition=”CrossFadeTransition”> <album title=”Album Title #1″ description=”Album Description #1″ image=”Images/Album1.jpg”> <slide title=”Slide Title #1″ description=”Slide Description #1″ image=”Images/Slide1.jpg” thumbnail=”Images/Thumbnail1.jpg” /> … </album> … </data>

Obviously, your data file should be modified to contain real album and slide data specific to your slideshow. Once it’s complete, reload the page in the browser and enjoy your slideshow!

Download Quick Start Guide

Please visit the Slide.Show project page on CodePlex (http://www.codeplex.com/SlideShow) for the latest releases, discussions, source code, and to provide feedback, report bugs, suggest new features, or to become an open source contributor for the project.

Advertisements
Categories: silverlight
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: