Supporters of End User
Web

Slideshow for SharePoint

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:MOSS; WSS; 2007; 2010; Content Editor Web Part; Javascript and jQuery; Site Manager/Power User; Web Parts

 

This solution lets you setup a smooth scrolling slideshow with data from your SharePoint list or your picture library. This solution displays all items in the specified view.

You can customize the appearance of the slideshow web part by changing the size of the slide, the scroll direction (both in and out), border style, background color and image, slide time and display time etc. See the bottom of article for full configuration details.

You can have multiple slideshow web parts in one page and have them scroll independently (it would be messy to look at, but you can do it…).

The solution has been tested in IE8, Firefox 3.6.13, Safari 5.0.3 and Chrome 9.0.597.98 in both SharePoint 2007 and 2010.

Screenshots from the slideshow

2011-02-23-SlideshowForSharePoint-01.png

 2011-02-23-SlideshowForSharePoint-02.png

Move the mouse over the slide to pause

2011-02-23-SlideshowForSharePoint-03.png
The dummy text is snagged from here and the images from Google’s picture search on color-in line drawings

The tool pane:

The button on the left brings you to “NewForm” for that specific list (not available if you are pulling images from an image library).

The middle ones are “Previous slide”, “Resume slideshow” and “Next slide”. The button on the right takes you to “DispForm” for that specific item.

The configuration options:

  • listGuid: The GUID of the list you will pull information from – see below for instructions getting this GUID
  • listBaseUrl: The base URL (site URL, not list URL) of the site containing the list to pull from
  • listViewGuid: The GUID of the view you will pull information from – see below for instructions getting this GUID
  • viewFields: An array of all the fields you want to include – using FieldInternalName
  • viewFieldsStyle: An array that corresponds with the above array. Used to set an individual CSS style of the value
  • imageMax: Object literal with the parameters “height” and “width”. This represents the max-height OR the max-width of images that are either pulled from a picture library, or from a hyperlink field configured as “Image”. This does NOT apply to images embedded in a rich text field. Use only one parameter at the time to keep the image aspect ratio. The one not specified should have the value null
  • containerID: A unique ID (unique in the current page) for the slideshow container.
  • containerHeight: Height in pixles
  • containerWidth: Width in pixles
  • containerBorderStyle: CSS style for the border of the container
  • containerBgColor: Background color of the container
  • containerBgImg: Background image to use for the container
  • inDir: The direction to scroll in the content (n,nv,ne,s,sv,se,v,e)
  • outDir: The direction to scroll out the content (n,nv,ne,s,sv,se,v,e or fade)
  • displayTime: How long to display each slide – in milliseconds
  • slideTime: The slide time – in milliseconds
  • readMoreLink: true or false
  • readMoreText: If the above parameter is true – the text or image to click to go to DispForm for the specific item
  • addNewLink: true or false
  • addNewText: If the above parameter is true – the text or image to click to add a new item to the list
  • emptyCaution: If the list view contains no items – this is the text displayed in the first (and only) slide

How to find the listGuid, viewGuid and FieldInternalName:

Go to the list view that will provide the input for your scrolling web part. Right click somewhere in the list view webpart and select “view source”. Search for“ctx.listname”, and you will find something like this:

ctx.listName = “{A4B4E15A-C5B0-47BC-A08B-739CD48FE58A}”;
ctx.view = “{B83E87C1-D25A-47DE-8196-A0A12DB89106}”;

The value for “ctx.listName” is used as “listGuid”, and the value for “ctx.view” is used as “listViewGuid” in the configuration.

To find the FieldInternalName of your field, go to DispForm on any element in the list, right click and select “view source”. You find the FieldInternalNames by searching for the “FieldName” (the display name) of your field. The FieldInternalName is found like this:

<!-- FieldName="My new field"
    FieldInternalName="My_x0020_new_x0020_field"
    FieldType="SPFieldText"
-->

The code

Download the code for the file “SlideshowForSharePoint.js” here

Store the file in a document library or a dedicated script repository in your site collection. Ensure all users have read access to this repository.

Place the CEWP where you want the slideshow to appear and add this code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/SlideshowForSharePoint/SlideshowForSharePoint.js"></script>
<script type="text/javascript">

var myScrSettings = {'listGuid':'A4B4E15A-C5B0-47BC-A08B-739CD48FE58A',
	'listBaseUrl':'/test/English',
	'listViewGuid':'5BD378F4-25D5-4880-9C5B-1667FE43978D',
	'viewFields':['Title','MultiLine','Image'],	
	'viewFieldsStyle':['padding:5px;font-size:16px','padding:5px;font-style:italic','text-align:center'],
	'imageMax':{height:150,width:null},
	'containerID':'myScrollableDiv',
	'containerHeight':270,
	'containerWidth':500,
	'containerBorderStyle':'border:6px silver double',
	'containerBgColor':'#CAE1FF',
	'containerBgImg':'/test/English/Javascript/SlideshowForSharePoint/bgImg6.png',
	'inDir':'e',
	'outDir':'v',
	'displayTime':3000,
	'slideTime':1500,
	'readMoreLink':true,
	'readMoreText':"<img title='Go to item' src='/_layouts/images/magnify.gif' border='0'>",
	'addNewLink':true,
	'addNewText':"<img title='Add new item' src='/_layouts/images/newitem.gif' border='0'>",
	'emptyCaution':"<div style='height:100%;width:100%;padding-top:140px;text-align:center'>There are no items to show here..."};
	
init_fillScrollableDiv(myScrSettings);
</script>

Change at least the listGuid, listViewGuid, viewFields and the “script src” to the file “SlideshowForSharePoint.js”

Regarding picture libraries:

You do not have to provide any entries in the array for the “viewFields” – leave it empty like this []. If you like to put additional fields above the image, add them to the array as shown above.

Ask if something is unclear
Alexander

Comments

Issy Bannatyne

This

Hi Alexander,
This is a truly beautiful thing, and was so easy to set up.
 
Thank you so much for sharing this.
 
Testing Feedback FYI
- I could not get 2 to work on the same page. They had different sources (listGuid) and I did change the containerID (not that I would every imagine wanting to have 2 on the same page anyway, but I thought I should let you know)
- when using a Picture Library as the source it also showed the pixel width just above the picture. I had it configured to show 2 fields, 'Title' & 'PreviewOnForm', I re-read your instructions again and realised I should just have had 'Title' Then it worked just fine.
 
Regards
Issy

Posted 03-Mar-2011 by Issy Bannatyne
Al

Great Job

Hi Alex,
Thanks for this.
Can we limit the rotation to 3-5 latest items in the list?
 
Cheers,
Al

Posted 04-Apr-2011 by Al
Lynn Popwell

2 slideshows on a page problem?

I wasn't able to get 2 slideshow CEWPs working on a page. Tried 2 in the same zone and 2 in different zones. Only the 'last' slideshow on the page works. The other one displays a container with chrome, but no slideshow.
I actually have a reason to show about 4 slideshows on a page. They're displayed as a stack of status scrolls on a large command center screen.
Regards,
Pop

Posted 06-Apr-2011 by Lynn Popwell
Alexander Bautz

RE: Great Job

Hi,
Sorry for the late reply. Until this friday there was no way other than manually checking for comments to keep track of the discussion on the posts. Now this site features "subscription to discussions" and all should be smooth sailing :-)
 
The answer:
Make a list view that shows the selection you want (by setting the sorting on ID column to "descending" and the itemlimit to 5). Use this view as source for your slideshow.
 
Alexander

Posted 15-May-2011 by Alexander Bautz
Alexander Bautz

RE: 2 slideshows on a page problem?

Hi,
I wasn't all that clear on how to keep multiple slideshows in the same page. The trick is NOT to call the script twice.
 
The topmost (on the page) occurence should include reference to both jQuery and "SlideshowForSharePoint.js", but any additional occurences should have only the "var myScrSettings = {..." and the function call "init_fillScrollableDiv(myScrSettings);".
 
Hope this helps - and if not, let me know (as of friday 13'th i will be emailed replies to this post)
 
Alexander

Posted 15-May-2011 by Alexander Bautz
Walter

myScrollableDiv

I don't see where the myScrollableDiv is added to the page

Posted 25-May-2011 by Walter
Walter

listBaseUrl

If the URL of my list is https://SERVER/sites/SharePoint/PowerUsers/images/ is my listBaseURL =
 
https:'/sites/SharePoint/PowerUsers' ? 

Posted 25-May-2011 by Walter
Alexander Bautz

RE: myScrollableDiv

This is generated by the script using the "containerID".
 
Alexander

Posted 25-May-2011 by Alexander Bautz
Walter

listBaseUrl

If the URL of my list is https://SERVER/sites/SharePoint/PowerUsers/images/ is my listBaseURL =
 
https:'/sites/SharePoint/PowerUsers' ? 

Posted 25-May-2011 by Walter
Alexander Bautz

RE: listBaseUrl

Right click the web page - View source - search for "L_Menu_BaseUrl". The value of that variable is the answer to your question.

Alexander

Posted 25-May-2011 by Alexander Bautz
Al

Great Job

Hi Alexander
 
Cheers for your feedback.
 
Is it possible to do make the summary text a link to the full body of the list item.
 
I changed my column summary in sharepoint designer to be a link of the item but it does not show up as link on the page.
 
thanks
AL

Posted 02-Jun-2011 by Al
Andrea Milliken

Help! I'm Lost

I'm not as technical as the other members here. I'm really confused on how to update the script to the unique SP site/presentation I'm using.
 
  • I've got the presentation uploaded.
  • I've got the script uploaded to a library where all users have "read".
  • I need to update the script, and that's where I get stuck.
 
Any help would be great.
 
Andrea Milliken

Posted 28-Sep-2011 by Andrea Milliken
Tyus

sp2010

Great work but I do have a question. This works great in sp2007 but for some reason I can't get this to work in sp2010. No error message it's just not displaying anything.  Any assistance you can give would be great.

Posted 11-Oct-2011 by Tyus
Alexander Bautz

RE: Help! I'm Lost

Hi,
To update the script you must use a texteditor like notepad (or SharePoint designer) locally on your computer. When the file is modified, upload it to your documentlibrary again.
 
Alexander

Posted 13-Oct-2011 by Alexander Bautz
Alexander Bautz

RE: sp2010

Hi,
This script is supposed to work in both SP2007 and in SP2010. Review your setup and try to activate the debug console in IE (F12 > Console) and see if you see any error messaged there.
 
Alexander

Posted 13-Oct-2011 by Alexander Bautz
Sandra

Repeat

This is great. Would it be possible to automatically repeat slide show when it comes to the end?
 
Sandra

Posted 16-Nov-2011 by Sandra
Sandra

Repeat

Funny thing, the slideshow does repeat itself! Don't know what happened before, it stopped and i didn't have mouse over it. I refreshed the page and the same thing happend. But now suddenly it works. Maybe the page was just tired and it just took a break :)
 
Thank you!
 
Sandra

Posted 16-Nov-2011 by Sandra
Tyler

Script unavailable

Hi.. I think link to the SlideshowForSharePoint.js is currently broken :(

Posted 03-Feb-2012 by Tyler
Y.M.P

Pop up slide container and pass pic library GUID dynamically...

Hi,
Great, It's working perfectly!!!
Coupld you please help me,
I have created visual webpart having hyperlink and dropdown list populated with picture library names.
On click of hyperlink it should pop up slide-show container which will show images from selected picture library from dropdown list.
Thanks

Posted 31-Mar-2012 by Y.M.P
Jean-Pierre Gibard

Customising the origin, size,shape of the slideshow part

Firstly, thanks for this great bit of code.
 
I'm trying to modify the .js file to allow the slideshow part's origin to stop at a defined coordinate in the container rather than the top left corner.  I have a background image that is taken from a Slide Master file and I want the list data to appear in the data area of the slide and not obscure the slide's header/footer.
 
I've managed to get it partially working by adding offsets in the slideshow movement area and the manual advance area but it does not operate consistently.  Sometimes a manual advance goes to 0,0.
 
I also need to reduce the width of the sliding part otherwise I lose text on the right side of the screen.

Posted 04-Apr-2012 by Jean-Pierre Gibard
Dirk

Great Script, großartiges Skript

Hi Alexander,
really a great script, it works fine!
With a mouse-over a bar will appear below.
Is it possible to deactivate this function?
 
Hallo Alexander.
wirklich ein großartiges Skript, es funktioniert gut!
Bei einem Mouse-Over erscheint unten eine Leiste.
Ist es möglich diese auszublenden?
 
Thanx, Danke
Dirk

Posted 31-May-2012 by Dirk
Jeannie

Images hyperlink to another page

Is there a way to add a function so when you click on an image it will take you to a URL specified in the list?

Posted 21-Jun-2012 by Jeannie
Nancy Odera

For Jeanie correction

Edit the image settings and add column targeturl. Edit the image properties and add the actual url. When you upload the pictures to your slide, they will direct you to the url you specified. You have to do it for all the images. That's what worked for me :-)

Posted 18-Jul-2012 by Nancy Odera
Preston

Text Below Images

I was just curious where the location of where the text appears on the Images sits?
 
I would like to display the the Title / Description / etc. BELOW the image rather than above it. Any help would be great.
 
Really like this script and approach.. simple, straight-forward, lots of uses. Thanks!

Posted 18-Oct-2012 by Preston
Sang

Container width

Thanks for the great code.. Is there a way i can adjust the width automatically based on size of the webpart.

Posted 07-Jan-2013 by Sang
Nancy

for Container width

Click on edit webpart, go to web part properties to your right, expand appearance, specify whether height and weight should be fixed or adjusted to fit zone.

Posted 07-Jan-2013 by Nancy
Adi Murugaian

Container width

i have containerwidth=400, and the webpart is set to adjust to fix zone when there is a scroll, the content from the item is limited to the container width which is 400 and there is lots of white space on the right side.

Posted 08-Jan-2013 by Adi Murugaian
Nancy Odera

Container width

Get both the actual width and height of the container and then add them to fixed height and width on the appearance property of the webpart. let me know if this works for you.

Posted 08-Jan-2013 by Nancy Odera
Sang

Container width auto adjust

I don't want the container width to be fixed, it should adjust automatically..

Posted 08-Jan-2013 by Sang
Nancy Odera

Container width

You can adjust the height only and let the width adjust automatically.

Posted 08-Jan-2013 by Nancy Odera
nancu

Container width

You can also click anywhere on the container then click on the html option on the ribbon. This should allow you Change the container dimensions.

Posted 08-Jan-2013 by nancu
Ryan

jquery

Really great work here... While it works for most of the sharepoint sites I have, this doesn't seem to work for sites that I have globally calling in updated versions of jquery. Site uses jquery-1.8.3.min.js and doesn't work. If I include jquery-1.5.0.js it works but breaks other jquery dependent functions. Any suggestions would be appreciated. Cheers!

Posted 04-Apr-2013 by Ryan
Stuart Hodgson

Multiple SlideShows

I think this is great and has been working for us using one slideshow for sometime now. I have an issue though when adding a second slideshow for a different set of users (target audience). I have set up the 2nd CEWP exactly the same as the 1st, omitting the 2 lines for jQuery and SlideshowForSharePoint.js, as the editor of the page I can see both slideshows working but users of the target audience for the 2nd one see nothing. I tried swapping them round and then the target audience of the 1st one can't see theirs! I'm confused - any assistance greatly appreciated.

Posted 18-Apr-2013 by Stuart Hodgson
Ryan

on mouseover

Hi,
Using this for some announcement web part rotator... I am noticing that when you mouseover the headline on the way to click the read more link the feed goes to the next item.
 
How do you stop this from happening?

Posted 20-Sep-2013 by Ryan

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: