Working with the Multi-Image Viewer Web Part
The Multi-Image Viewer Web Part is responsible for the display of one or more product and variant images. At minimum, this Web Part displays the main image for the product with minimal required configuration options. This Web Part is able to display multiple thumbnail images for each product and/or variant. Images are displayed in a small strip with a larger viewing area above the image strip. Clicking any of the images within the image strip loads that image into the main image display area.
You can use different XSLT templates to have more flexibility in the presentation of the image.
The Multi-Image Viewer Web Part uses the Service Catalog. You can change the catalog though the Product Provider Web Part.
Connecting to the Product Provider Web Part
The Multi-Image Viewer Web Part uses a Web Part connection to the Product Provider Web Part.
To connect to the Product Provider Web Part
From the Product Details page, click Site Actions, and then click Edit Page.
Click the Web Part drop-down menu and the select Edit Web Part.
Click Connections, click Get Product Provider From, and then select Product Provider Web Part.
Properties
You can select available properties to use through a pick list that is arranged to provide an HTML image property. You can supply default values for the display of the image in the absence of data from the catalog.
The following properties are available for the Multi-Image Viewer Web Part.
Property |
Type |
Description |
Default value |
|---|---|---|---|
Template to Display |
String |
Template that displays the images. |
none |
Template Details |
String |
XSL style sheet. |
none |
Save Current Template to Library |
String |
The name of the library in which to save the template. |
none |
Main image width |
Int |
Defines the width of the main image in pixels. |
None. (Original image size will be displayed.) |
Main image height |
Int |
Defines the height of the main image in pixels. |
None. (Original image size will be displayed.) |
Thumbnail image width |
Int |
Defines the width of the thumbnail image. |
None. (Original image size will be displayed.) |
Thumbnail image height |
Int |
Defines the height of the thumbnail image. |
None. (Original image size will be displayed.) |
Text for variant thumbnail images |
String |
Text to display above variant thumbnail images. |
Also available: |
URL prefix for images |
String |
URL prefix that is concatenated with the image name to form the URL of the image. |
None |
The following table lists the parameters that the Multi-Image Viewer Web Part passes to the XSLT template.
XSLT parameter |
Description |
|---|---|
_MainImageWidth |
Defines the width of the main image in pixels. |
_MainImageHeight |
Defines the height of the main image in pixels. |
_ThumbnailImageWidth |
Defines the width of the thumbnail image. |
_ThumbnailImageHeight |
Defines the height of the thumbnail image. |
_VariantThumbnailsText |
Text to display above variant thumbnail images. |
_ImageUrlPrefix |
URL prefix that is concatenated with the image name to form the URL of the image. |
Customization
You can customize the Multi-Image Viewer Web Part by using a different XSL template.
API Dependencies
There are no API dependencies for this Web Part, although it does interact with the Product Provider Web Part.
See Also
Other Resources
Developing with SharePoint Commerce Services
Developing with Catalog Web Parts