<xmod:Slideshow>

<xmod:Slideshow> is a view tag that displays a sequence of images, fading between them on a timer. Unlike <xmod:Template> and <xmod:DataList>, it has a single purpose: rotate through a list of image URLs returned by a SQL query. There is no detail view, no paging, no role-based gating — anyone who can see the module can see the slideshow.

Requires jQuery

The slideshow uses XMP's bundled jQuery plugin (~/DesktopModules/XModPro/scripts/jquery.xmp-slideshow.js), which requires jQuery 1.3 or later on the page. Default DNN skins include jQuery; verify a custom skin does too.

Example

<xmod:Slideshow ImageField="EmployeePicUrl"
                Height="250" Width="200"
                Timeout="6000"
                BasePath="/images/employees/">
  <ListDataSource CommandText="SELECT EmployeePicUrl FROM Employees" />
</xmod:Slideshow>

Properties

Property	Values	Default	Description
ImageField *	column name		Column in the data source that holds each image's URL
ID	string		Unique identifier within the view
BasePath	path		Prepended to each image URL — useful when the data source stores filenames only
Width	pixels		Width of the slideshow viewport (just the number, no px)
Height	pixels		Height of the slideshow viewport (just the number, no px)
Timeout	milliseconds	4000	How long each image is shown before transitioning
ResizeImages	True False	False	When True, every image is sized to fit the viewport
ConnectionString	string | [[ConnectionString:name]]	DNN database	Connection string used by <ListDataSource> if it doesn't specify its own

* Required property

Child Tags

Tag	Required	Description
<ListDataSource>	required	SQL or stored procedure returning the image rows. Same surface as on <xmod:Template>

Property Details

• ImageField: The name of the column in the data source whose value is the image URL (or filename, when used with BasePath).

• BasePath: A folder path prepended to every ImageField value. Useful when the data source stores just filenames (e.g. pic1.jpg) and you want to keep the gallery's folder out of the database. The tilde (~) is supported for paths relative to the application root.

• Timeout: The dwell time, in milliseconds. 1000 = 1 second; the default 4000 = 4 seconds.

• ResizeImages: When True, the slideshow's JavaScript sets each image to the slideshow's Width and Height. Useful when the source images aren't all the same size — set the viewport to the smallest image's dimensions and let the larger images scale down. The source image files are not modified.

  For best results, prepare images at a consistent size before uploading.

• ConnectionString: Default connection string for <ListDataSource> if that child doesn't set its own. Defaults to the DNN site database. Use [[ConnectionString:name]] to reference a web.config connection string.

• <ListDataSource>: The data command. Same syntax as on <xmod:Template> — SQL or stored procedure, with optional <Parameter> children. The query just needs to return the column you named in ImageField.