Beyond the Slideshow web part capabilities in SharePoint 2010

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.

PictureLibCustomFields

The following  fields are retrieved  from Picture Library for Slideshow:

So, our goal is to display slideshow using custom layout as shown below

CarsSlideshow

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.

About these ads

10 thoughts on “Beyond the Slideshow web part capabilities in SharePoint 2010

  1. HI, thank you so much for providing this information. I am using the option 2, “Customize the display for Slideshow control: display original pictures to force 100% of image size in the Slideshow web part.”

    I am having success EXCEPT that the very first image is still displaying at the reduced size; once the slideshow moves to the second image and beyond, the images appear full-size expected. Can you advise on why is image #1 not also appearing full-size?

  2. I am having a similar yet different problem with option 2. My slideshow is displaying the pics in thumbnail size originally, then changing them to full size, which causes a jump effect on screen as each picture loads. I have the script running ahead of the slideshow but cannot get this working.

    Any help would be much appreciated.

    Thanks.

  3. How do i get my Slideshow to Center on my page? I seen some entires for doing this by changing the master style sheet using the code below, however I do not have access to edit the master style sheet. I tried adding this code to a content editor, but it doesn’t seem to be working…Anything jump out as being wrong here?

    .ms-WPBody.noindex{
    font-size:8pt;
    font-family:”Segoe UI” !important;
    }

    .ms-WPBody.noindex table{
    font-size:1em;
    width:100% !important;
    height:100% !important;

    }

    .ms-WPBody.noindex td{
    font-size:10pt;
    font-family:”Segoe UI” !important;
    width:100% !important;
    height:200px !important;
    margin-left:auto !important;margin-right:auto !important;
    /* text-align:center !important;*/
    }

    .ms-WPBody.noindex td div{
    height:auto !important;
    width:100% !important;
    text-align:center !important;
    display:block !important;;
    }

    .ms-WPBody.noindex td div span{
    width:100% !important;
    }

    .ms-WPBody.noindex td img{
    height:100% !important;
    width:100% !important;
    }

  4. Very helpful post !
    I searched how to display the original Size – but how can i disable the hyperlink on the slideshow ?

    Thank you :)

  5. Vadim: This post is incredibly helpful. I used your StackExchange answer to the question of how to change the link from linking to the image to linking somewhere else. I was able to get that working, but it only lets me set one link. I tried setting ssObj.link.href to an array (the way linkArray is set up), but it still only links my images to the one custom URL.

    Is there a way to apply an array of URLs, so that each image links to a different URL? Ideally, I would reference a column created in the image library, but am OK hard-wiring the list of over-ride URLs. I just need a unique URL for each image in the library. I would greatly appreciate an answer.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s