Extending Picture Library Slideshow web part in SharePoint 2010

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

public struct ImageInfo
{
public int width;
public int height;
public string src;
public string fullImageSrc;
public string title;
public string descrption;
}

view raw
ImageInfo.cs
hosted with ❤ by GitHub

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

//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:

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 :

//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');

view raw
imglibutils.js
hosted with ❤ by GitHub

5 thoughts on “Extending Picture Library Slideshow web part in SharePoint 2010

  1. 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

  2. Pingback: Beyond the Slideshow web part capabilities in SharePoint 2010 | Yet Another SharePoint Blog

  3. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.