Overview
In one of the previous post we have started the discussion of customizing Slideshow web part, in particular it was demonstrated how to provide additional filtering for picture items. This time we’re going to go further and consider different scenarios of using SharePoint SlideShow capabilities. We deliberately do not consider the use of third party libraries for Slideshow or creating custom web parts, but try to build new experience using existing tools only.
1. Customize the display for Slideshow control: display additional picture properties
Suppose in addition to standard properties, custom properties should be displayed from Picture Library in Slideshow web part.
The following fields are retrieved from Picture Library for Slideshow:
- Title – picture title that is displayed in the PictureLibrarySlideshowWebPart, see SPPictureLibrarySlideshowDisplayStyle property for layout configuration
- Description – picture description that is displayed in the PictureLibrarySlideshowWebPart, see SPPictureLibrarySlideshowDisplayStyle property for layout configuration
- EncodedAbsWebImgUrl – Url of web image is used for displaying picture
- EncodedAbsUrl – Url of original image is used for picture link
- ImageWidth – picture width
- ImageHeight – picture height
So, our goal is to display slideshow using custom layout as shown below
Solution:
Solution consist of the following parts:
- load custom picture properties, see loadCarPicturesAdditionalInfo method for details
- Slideshow library (imglib.js) methods overriding for slideshow object initialization, picture changing and displaying
Usage
Save JavaScript code to the file and embed it into the page with Slideshow web part as demonstrated below
2. Customize the display for Slideshow control: display original pictures
In Slideshow web part, picture is initialized with field value that contains the Url of Web image (EncodedAbsWebImgUrl field). Unfortunately it is not supported to configure in web part what image type (original, web or thumbnail) should be displayed in Slideshow The solution that demonstrated below allows to display original images instead of web images in Slideshow web part.
Solution:
In order to specify original images, method overriding for picture initialization is used:
Usage
One of the most simple way to apply these changes is to embed specified JavaScript code via Content Editor web part (CEWP), for more details please follow this article.
- Save JavaScript code to the file, for example in SlideshowObjectInitializer.txt and upload it to SiteAssets Library
- Add CEWP on page where Slideshow web part is located and in the Content Editor tool pane, under Content Link property, type
/SiteAssets/SlideshowObjectInitializer.txt
3. Slideshow List View
Slideshow List View is only available for Pictures Library. It is pretty common scenario when another types of repositories are used for storing images, for example Assets Library. Let’s look at how to create a Slideshow List View for images stored in Assets Library.
Solution:
Slideshow List View
Slideshow control initialization and retrieving picture entries from Assets Library
4. Aggregate picture items and render as Slideshow
The last example demonstrates how to display slideshow for pictures aggregated from site collection. For aggregating pictures from site collection, Content Query web part is utilized.
Solution
OuterTemplate.SlideShowBody template is intended for rendering Slideshow control in CQWP
Usage
- Configure source properties (List Type: Picture Library, Content Type: Picture)
![PicturesCQWP]()
- Specify additional fields for retrieving via CommonViewFields property. For more details how to display custom fields in a CQWP, follow this article
- Replace OuterTemplate.Body template with OuterTemplate.SlideShowBody in ContentQueryMain.xsl. For more details how to customize XSL for the Content Query Web Part follow this article
Conclusion
The main idea of this post was to demonstrate how to combine different components available in SharePoint 2010 in order to build new functionality without creating new one from scratch (i.e.: new web parts) or using third party components.
