Overview
According to MSDN Picture Library Slideshow web part is used to display the pictures in a picture library slideshow.
Below are provided some details about how Picture Library Slideshow web part works:
Step 1. Query Picture Library
Picture items are retrieved via SPQuery from Picture Library and results are saved in internal array of ImageInfo entries
https://gist.github.com/vgrem/5073655
Step 2. Initialize and render Slideshow control
JavaScript Slideshow Library ( imglib.js) is included and slideshow control is rendered.
Information about Picture entries is passed to the client side and Slideshow control is initialized
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //1.Initializtion of Picture entries for SlideshowObject | |
| var pictureArray = […]; | |
| var linkArray = […]; | |
| var titleArray = […]; | |
| var descriptionArray = […]; | |
| var heightArray = […]; | |
| var widthArray = […]; | |
| //2.Creating of slideshow object | |
| //transitionTime – the interval time, in seconds, between the display of subsequent pictures (Speed property of PictureLibrarySlideshowWebPart) | |
| //mode – the display order (sequential or random) of the pictures (Mode property of PictureLibrarySlideshowWebPart) | |
| var slideshowObject = new SlideshowObject(slideshowObjectId, pictureArray, linkArray, titleArray, descriptionArray, heightArray, widthArray, transitionTime, mode); | |
| ChangePic(slideshowObject); | |
Extending Picture Library Slideshow web part
Picture Library Slideshow web part class is marked as sealed, so it could not be extended by inheriting from it . But there is another way how it could be extended.
As was noted earlier SlideshowObject is instantiated using object constructor. Using the technique with overriding SlideshowObject constructor it is possible to provide additional logic as shown below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| SlideshowObject = (function(SlideshowObjectOrig) { | |
| return function() { | |
| //Some code could be placed here | |
| //Call original SlideshowObject constructor | |
| return SlideshowObjectOrig.apply(this, arguments); | |
| }; | |
| })(SlideshowObject); |
For example, the following example demonstrates how to exclude pictures with no titles from displaying them in Slideshow :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Overridden SlideshowObject constructor with method for excluding pictures | |
| function SlideshowObjectInitializer() { | |
| SlideshowObject = (function(SlideshowObjectOrig) { | |
| return function() { | |
| //Exclude pictures | |
| if(typeof excludePic != 'undefined') { | |
| for(i=0,k=0;i<arguments[1].length;i++) { | |
| var imageInfo = {src: arguments[1][i], fullImageSrc: arguments[2][i], title: arguments[3][i],description: arguments[4][i], height: arguments[5][i], width: arguments[6][i]}; | |
| if(excludePic(imageInfo)) { | |
| for(j=1;j<7;j++) { | |
| arguments[j].splice(i, 1); | |
| } | |
| i—; | |
| } | |
| } | |
| } | |
| //Call original SlideshowObject constructor | |
| return SlideshowObjectOrig.apply(this, arguments); | |
| }; | |
| })(SlideshowObject); | |
| } | |
| //Exclide pictures with no titles | |
| function excludePic(imageInfo) { | |
| return (imageInfo.title.length == 0); | |
| } | |
| ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js'); |
YASP Blog 
Hi..This is a great information..It works fine..
I would like to add a hyperlink column to Picture content type. On clicking the image in the slide show web part, the user should be redirected to the value entered in the hyperlink column instead of the image itself. Can you suggest the changes to be done in this script to achieve this?
Hi, please follow my next post about different ways for customizing Slideshow web part. I believe your scenario is most similar to example 2 – Customize the display for Slideshow control: display original pictures
Pingback: Beyond the Slideshow web part capabilities in SharePoint 2010 | Yet Another SharePoint Blog
Hey..can you pls share the Javascript code to open custom url on clicking on an image…Its quite urgent and would really appreciate it. Thanks.
did you find any solution ? I am facing the same problem