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
Edit Properties
Custom edit properties include:
- Image Link - The path to the image directory. This is a path relative to the website.
- NOTE: The Xml File takes precedence over the image directory.
- Xml File - The configuration xml file that contains a list of images. This is a path relative to the website.
- The xml file allows multiple albums to be displayed.
- The xml file displays additional properties for each image.
- Title
- Description
- Thumbnail
- Source
- Hyperlink
- CMS Common Edit Properties
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.
- The directory is treated as a single album.
- Photos are displayed alphabetically.
- The default photo transition of CrossFadeTransition is used between photos.
- The default wait time = 3000 ms and transition time = 500 ms are used.
- Attributes of the photo include:
- The Photo title is the file name.
- There is no photo description.
- A thumbnail photo option for display is not available.
- The hyperlink is set to the image location.
XML File Option
XML Files define the display characteristics. To use the XML File option, the following files are required:
- Data.xml file that defines the albums and images/videos to be displayed in the slide show. The name for the Data.xml file may be changed.
- Configuration.xml file that configures the silverlight player. The name for the Configuration.xml file may not be changed.
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:
- CircleInTransition
- CircleOutTransition
- CircleTransition
- CrossFadeTransition
- HorizontalSlideTransition
- NoTransition
- ShapeTransition
- SlideDownTransition
- SlideLeftTransition
- SlideUpTransition
- SlideTransition
- SlideUpTransition
- TranslateDownTransition
- TranslateLeftTransition
- TranslateRightTransition
- TranslateUpTransition
- VerticalSlideTransition
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:
- Multiple albums can be displayed
- Attributes for each Photo Album includes:
- Album title
- Album description
- A photo for the album
- Which album to start with
- The transition used between photos in the album
- Attributes for each slide includes:
- Photo title
- Photo description
- A thumbnail of the photo (used for faster loading)
- A hyperlink used when the photo is clicked
<?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:
- background colour
- whether the player should start the slide show
- whether the player starts in album view
- The Height of the description
- the duration of the transition between images
- the time that the image is displayed
<?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>