Web Part: Photo Album Part (Silverlight)

Modified on 2011/10/11 01:26 by Charles — Categorized as: CMS, Web Parts


Photo Album (Silverlight) Web Part

Photo Album (Silverlight) Web Part

This Web Part displays images using Microsoft Silverlight. Images are presented in a slideshow, rotating through each image. Images are displayed from a directory or from an XML file.

Access

The Web Part is accessed from the CMS Media Web Parts Library.

Editor for the Web Part

Editor for the Web Part

Edit Properties

Custom edit properties include:


Website Configuration

Refer to Silverlight Site Dependencies to identify website configuration requirements.

Directory Option

The Directory option displays all images found in the selected directory. This is simpler to configure, but uses default characteristics for the display.

XML File Option

XML Files define the display characteristics. To use the XML File option, the following files are required:
These files should be placed in a folder in the website.

Photo Transitions

The photo album can be configured to transition images in the XML file option. Transitions include:

Sample Data File

The following xml snippet is a sample of the Data file used with the Silverlight Photo Album. To use the XML file for your application, create an xml file in a directory of your website, download the following file from Silverlight Photo Album sample xml file (Note: You may need to 'view the source' of the web page to see the file contents).

Features associated with using the XML file include:
<?xml version="1.0" encoding="utf-8" ?>
<data startalbumindex="0" transition="CrossFadeTransition">
	<album
		title="Liam Molloy"
		description="A collection of Liam's favorite Hard Rock memorabilia items"
		source="../Assets/Memorabilia/t_100299.jpg"
		transition="CircleInTransition">
        <slide
			title="Kids wave to the SeaWorld shark tank diver"
			description="SeaWorld San Antonio"
			source="../Assets/Memorabilia/Kids wave to the SeaWorld shark tank diver.jpg"
			thumbnail="../Assets/Memorabilia/Kids wave to the SeaWorld shark tank diver.jpg"/>
		<slide
			title="dummy"
			description="This image doesn't exist, resulting in the blank image being shown.  This image also has a really long description, just to show that you can expand the description height in the XML configuration now to support really long descriptions."
			source="../Assets/Memorabilia/invalid.jpg"
			thumbnail="../Assets/Memorabilia/invalid.jpg"/>
        <slide
			title="Chad Smith - Red Hot Chilli Peppers - Custom Pearl drum kit"
			description="Image provided by Hard Rock. Click on image for more details"
			source="../Assets/Memorabilia/s_100299.jpg"
			thumbnail="../Assets/Memorabilia/t_100299.jpg"
			link="http://memorabilia.hardrock.com/?item=100299"/>
		<slide
			title="Sid Vicious - The Sex Pistols - Jacket and letter from mom"
			description="Image provided by Hard Rock. Click on image for more details"
			source="../Assets/Memorabilia/s_006434.jpg"
			thumbnail="../Assets/Memorabilia/t_006434.jpg"
			link="http://memorabilia.hardrock.com/?item=006434"/>
	</album>
	<album
		title="Scott Stanfield"
		description="A collection of Liam's favorite Hard Rock memorabilia items"
		source="../Assets/Memorabilia/t_093845.jpg"
		transition="SlideLeftTransition">
		<slide
			title="Bo Diddley - Tom Holmes custom guitar"
			description="Image provided by Hard Rock. Click on image for more details"
			source="../Assets/Memorabilia/s_093845.jpg"
			thumbnail="../Assets/Memorabilia/t_093845.jpg"
			link="http://memorabilia.hardrock.com/?item=093845"/>
		<slide
			title="John Lennon - US Army shirt"
			description="Image provided by Hard Rock. Click on image for more details"
			source="../Assets/Memorabilia/s_051892.jpg"
			thumbnail="../Assets/Memorabilia/t_051892.jpg"
			link="http://memorabilia.hardrock.com/?item=051892"/>
		<slide
			title="The Beatles - “Butcher Cover” Yesterday and Today LP, box"
			description="Image provided by Hard Rock. Click on image for more details"
			source="../Assets/Memorabilia/s_052067.jpg"
			thumbnail="../Assets/Memorabilia/t_052067.jpg"
			link="http://memorabilia.hardrock.com/?item=052067"/>
	</album>
</data>

Sample Configuration File

The configuration file (placed in a separate file in the same folder) is used to pre-configure the silverlight player. Examples include:
<?xml version="1.0" encoding="utf-8" ?>
<configuration background="Black" AutoStart="false" StartInAlbumView="true">
    <module name="SlideDescription">
        <option name="DescriptionHeight" value="60" />
    </module>
    <module name="Transition">
        <option name="TransitionDuration" value="500" />
        <option name="WaitTime" value="3000" />
    </module>
</configuration>