SharePoint Slideshow webpart shows all the pictures from a SharePoint picture library as thumbnail images in a slideshow. On clicking a thumbnail, the image will be shown in a modal popup with options to navigate forward/backward and also to view the pictures as a slideshow.

The below plug-ins have been used for the development

Jquery Lazy Load:

Lazy Load can make the page load a lot faster. Lazy Load is a jQuery plugin that delays loading of images until they are actually visible in the page. Images in the next pages(visible part of web page) will not be loaded before user goes to next page.

Check Lazy Load to read the documentation and to download the last version.

jPages:

Pagination is done using client-side pagination plugin.

Check jPages for more information about the plugin.

ColorBox:

A lightweight customizable lightbox plugin for jQuery.

Check colorbox for more information.

clip_image001

Figure1.1:Home page Thumbnail with paging.

Note: If you want to change the look and feel of the above thumbnail, update style.css file.

 

Webpart Settings:

1.1 Slideshow Homepage settings:

clip_image002

Figure 1.2: webpart – SlideShow HomePage Settings.

SlideShow Webpart Title : Set the webpart title. You can include html formatting tag also(e.g. <h3> Title</h3>).

Items Per Page : Set the number of images visible at a time/number of images per page(Thumbnail image) that needs to be loaded in a Page in the webpart.

Animation Effects : Select the animation effects; they will be supported only in CSS3 compliant browser.

Auto rotate page :Set the time to wait (in milliseconds) till the web part scrolls automatically to next page in the webpart. Set to 0 if scroll is not required.

Thumbnail Size : Default thumbnail size used is 160px for optimum quality. This can be changed as required.

Skip loading Jquery,if already included in Master page : Checks if Jquery is already included in the master page and skips loading jquery redundantly if already detected , Default is false(unchecked).

1.2 Slideshow

clip_image003

Figure 1.3: webpart – SlideShow Settings.

Select Theme : Four themes are available by default, select one.

Transition : Fade, elastic and none. select any one.

Sideshow on Clicking the Image: Sideshow will be started automatically on click of any image if this option is selected. By default it is true.

Slideshow Speed (in milliseconds): Slide Time between images in slideshow.

Image Width : Set the width of the image in the slideshow (eg:1000px, 740px)

Image Height : Set the height of the image in the slideshow (eg:1000px, 740px)

clip_image005

Figure1.4: SlideShow Pop-up.

 

1.3 SharePoint List Details:

clip_image006

Figure 1.5: webpart – SharePoint List Details Settings.

Server Relative web URL : Enter the name of the site that contains the Picture Library:
- Enter a "/" character if the Library is contained in the top site(by default).
- Enter a path if the Library is in a subsite of the current site (eg. in the form of "current site/subsite").

ListName : Specify the SharePoint list name from where the images need to be retrieved.

FolderName : Specify folder name (if needed). Only Folders directly below the Picture Library can be mentioned. If a folder name is mentioned in this property, only the items within this folder and its subfolders(if Include SubFolders property is selected) are retrieved.

Include SubFolders : Select, if images need to be taken from Subfolders in the picture library.

No of Images : Set the count of total number of images to be taken for the slideshow from library.

Blank-if you want to fetch all the images.

Cache Expiry : Set the cache expiration time in seconds.

Column Name : Specify the column from the list to be used for displaying information/description in slideshow below the picture. The default value will be "Name"

Last edited Aug 21, 2012 at 2:11 PM by Sudarsanan, version 2

Comments

damjdamj Aug 28, 2013 at 11:26 AM 
It can't be activated in sandbox solutions. Or at least not in my environment. thanks.

joedz20 Jul 12, 2013 at 11:56 AM 
Column Name Doesnt work