Slideshow for SharePoint

This is a repost of one of my articles article originally posted over at NothingButSharePoint.com

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 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…).

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

IMG

IMG

Move the mouse over the slide to pause

IMG
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

83 Comments on “Slideshow for SharePoint”

  2. Hi A, great feature here.

    Is it possible to make the Slideshow pull data from multiple Lists or Libraries? Say the Announcements, Custom List, Doc Library, Discussion List, etc.
    This would automate the Slideshow even further. Displaying user submissions and uploads in each Slide. ie: Less maintenance.
    Or if there is a Custom List that can be created that pulls in data from multiple lists in a site, then that can be used?

    Thanks,

    Brett

    1. Hi,
      Everything is possible, but this would require the solution to be changed. I cannot promise that i will have the time to implement this, but if you will have a go, the querying is done in the function “fillScrollableDiv”.

      You would have to pass in the listGuid, listBaseUrl, listViewGuid, viewFields and the viewFieldsStyle as an array in the CEWP code and loop trough then in the functio “fillScrollableDiv”.

      See what you can make out of it.

      Alexander

  3. Is it possible that you could change the implementation so that you can display the image on the LEFT of the text?

    Furthermore, I am having a problem where the list items overlap each other from time to time.

    1. Hi,
      To have the image on the left, use only one rich text field as source. In this field, you setup the images and text as you prefer.

      The overlap issue could be many things. First off, which browser do you encounter this issue in?

      Alexander

  5. there are many solution out there similar. You are truly an artist. I love the use a SP list. is it an easy change to show 4-5 images at a time in some sort of a scrolling ribbon and still keep most of your functionality?

    1. Hi,
      You could easily hook it up with a image library. When you do, leave the “viewFields” empty.

      You can control the sliding with the “displayTime” and “slideTime”.

      Alexander

  6. Hi Alex,
    I’m using this with a SharePoint list to display important items (like a scrolling announcement) and it works great.

    Just wondering if there is a way to display the name of the field or add my own text before the field (like a label).

    Here is my use case: (note Version, Date and Upgraded by are examples of labels I’m trying to add)
    We have updated to a new version of the product

    Version: 1.1
    Date Upgraded: 9/28/11
    Upgraded by: Nick D

    1. Hi,
      there are no interface for this at the moment, but you should be able to insert your text. Look for
      iBuffer = [];

      and try to insert your text like this:
      iBuffer = [“My custom label”];

      I haven’t tested this so it might not work….

      Alexander

  8. I cannot get this to work. I have my pictures in a picture library.
    I copied the js to a javscript directory on my site.
    I copied you code to a txt file to my site.
    I changed the guid as needed.
    I added a CEWP to my page and linked the txt file to it.

    No dice.

  9. Pingback: SharePoint 2010 SlideShow Webpart | Software Design

  11. Hi, also, is there any way to disable the toolbar? Whenever I “unpause” the slideshow using the toolbar I get the overlap issue mentioned above. I am using IE 8.0. I can send you a screen shot if needed.

    1. Hi,
      I have seen the overlap issue, but at the moment I have to much to do to look at it, sorry.

      I’ll put it on my to-do list though.

      Alexander

  12. Works beautifully ….i dint get the overlapping of items by adjusting the times where display time is way longer ( like 100 times) than slide time.

    But pause function became funny…items just jumped in when I hover in and out ….need to tweak it a bit.

    1. For my requirement i needed the user to manually scroll next / previous to view other news items.

      so i set display time like 30000 , slide time as 150 to not allow items to slide & overlap before time.

      And for the jumping of items on mouse enter and leave i tweaked

      the mouseleave function to have stopscroll as true –
      items stopped jumping then.

      Thank you for this wonderful webpart 🙂

  13. I have managed to get the slideshow to display the contents of a task tracker so we can quickly review our progress. I would like to able to filter items by varying criteria (review date, Open/closed, name) and wondered if there was some way of using List Views to control what slides are shown. Data filtering is used in the SPJS Charts by selecting a view, can this be done in SlideShow?

  14. Hi, I’ve just worked out that I CAN already apply filtering. I created a new View, then pasted its listViewGuid into the script and Viola!
    Changes to the View filter specs = changes the Slideshow.
    Thanks for you great work – What Beer to you like?

    1. Nevermind, I figured it out…..and now I feel stupid for not going with my gut. I thought about putting it in between div tags and aligning it to begin with but never tried it because I didn’t think it would work for some reason. Once I tried it, it actually worked.

  16. Well it didnt put my code in my comment but what I was trying to say was to put a DIV tag. Which would look like DIV align=”center” with the greater than and less than sign around it.

    1. Could you please show where in the code this DIV align goes? I, too, am trying to center align the images within the container, but am having problems. Appreciate your help in advance.

  17. Got it working beatifully with a Task Tracker list that allows us to conduct quick briefings without the need for making .ppts. I did have a shock though when I changed to jquery.min.1.7.2 to get SPJS charts working. The slideshow stopped working and it took a while to figure what was broken – jquery.min.1.6.4 seems to work fine for both Slideshow and SPJS charts.

  18. Just as I had things running well with a single List. Things have changed, and I need to display data from mulitple lists (using the same template) situated in sub-sites. Can the Slideshow be made to work with a Content Query Web-Part? I have a CQWP which brings together the required data.

    Our server is OOTB SP2010 and I have no access to SPD or deploying “extras” on the server for Cross-site linkage.

  19. Awesome slideshow.. i was able to make it work Thanks.
    have a question.. i have a date column called Expire.. need to show only the items where Expire is greater than TODAY date.

    how can i achieve it ?

    -Thanks
    Sangy

  22. Pingback: Galería de imágenes en SharePoint 2007 con jQuery « MVPs de LATAM

  23. I’m having trouble getting this working. The script is running but displaying this error:

    —–

    An error occured!
    Check the “listViewGuid” and “listBaseUrl” parameter.

    listViewGuid: C1058E9C-D8A0-4BE1-B05B-BB21155F2E61
    listBaseUrl: /Christmas%20Party%202012.

    —–

    I have the images I want to display in a Picture Library. The relevant source code when viewing the Picture Library in the browser is:

    —–

    ctx.listName = “{0DAA3E4E-6A6C-42BF-9D4A-6BAE8BFC1D63}”;
    ctx.view = “{C1058E9C-D8A0-4BE1-B05B-BB21155F2E61}”;
    ctx.listUrlDir = “/Christmas%20Party%202012”;

    —–

    Any idea what might be going wrong, or hints about what I should be checking?

    Thanks for any help you can give!

    AndyB.

  24. OK, no problem, I’ve figured it out.

    I was looking at the wrong value for listBaseUrl. I was reading through the comments on the nothingbutsharepoint.com posting of this article where you point out that it is the “L_Menu_BaseUrl” value that is needed here.

    All working now!

    Thanks very much for a great script.

    AndyB.

    1. Ok, solved.
      0) Create the column
      1) Testing the field/columnname in function queryItemsByViewName and pushing the value from the list to myDisplayTime (new array)
      2) Setting new values in function scrollMyDiv:
      sObj[id].displayTime = myDisplayTime[sObj[id].currIndex]

      Works perfect (Sharepoint 2007).
      NB: only for IE 8/9/10

  28. Hi there. It looks like this doesn’t work with the current versions of jQuery (broken since 1.6.x from my testing).

    Everything looks fine until the success callback from scroll_wrapSoapRequest. I’m having a little trouble debugging the callback to see what exactly is going on there.

    And idea what I should be looking for?

    Thanks.

      1. Yep that was the exact issue. I actually fixed it by changing lines 4-6 of queryItemsByViewName:

        result.count = $(data).find(“rs\\:data”, “data”).attr(‘ItemCount’);
        result.nextPagingInfo = $(data).find(“rs\\:data”, “data”).attr(‘ListItemCollectionPositionNext’);
        $(data).find(“z\\:row”, “row”).each(function (idx, itemData) {

        Thanks!

  29. Posted this over on NothingbutSharePoint site but no response – hoping that someone here can help:

    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.

    Thanks

  30. If anyone could tell me where in the code (above) the should be placed to center-align images, it would be greatly appreciated. I am trying to align the images within the container, but am having problems. Appreciate your help in advance. I’m using IE9.

      1. I only have an error about the css for the :visited not being applied. I don’t have any other errors.

      1. I just tried it but it does the same thing – it only show the items once.

        I figured out why it won’t repeat – it won’t repeat if you only have one item/picture on that view.

  32. Hi Alex – I’m back.

    I was wondering if there is a way (and how if possible) to make the slide show display 2 images on the same slide instead of just one per slide.

    Do you think that’s possible to do?

    Thanks!

  35. Each time I edit the page – to add maybe another webpart of edit an esiting one. (not the one with the js. It generatesmore code and shows static list entries under the scrolling text.
    Amny idea why this is?

  36. Sorry about my last post – read if back and it makes not sense 🙁
    Turns out it only happens in FireFox – I’ve deleted the extra code in IE9 and saved successfully. Thanks! I’ve been looking for something like this for ages.

    1. Hi,
      Sorry for the late reply. It makes sense and is probably caused by the code being inserted as HTML in a CEWP. If you use a CEWP you must link to the code from a text file using the content link option. If you prefer to have the code directly in the web part, you must use a HTML Form Web Part.

      Alexander

      1. Hi Alexander,
        Thank you very much for replying.
        I have sharepoint 2007 and i try to make my announcements interchange using your guide.
        I will appreciate if you can review my steps and tell me what i did wrong:
        1. I have downloaded “SlideshowForSharePoint.js” and stored it in some document library on sharepoint.
        2. I right click my announcements list and copy the values of ctx.listName and ctx.view from the source code and paste them in your code. example:
        ‘listViewGuid’:’D42891A2-02A6-4CBD-B456-22125333B0AB’,
        {‘listGuid’:’4CADB2E3-16A5-4AAE-ADDA-73E10B7EDA70′
        3. I’ve modifiedbelow tag to point to your js and made sure it’s accesible:

        4. I have set my base site url:
        ‘listBaseUrl’:’http://mysharepoint/it/’
        5. I’ve added “content editor web part”
        I added the modified code in the source editor.

        I see nothing.
        Can you help?

  38. Hi Alex:

    I’ve updated the code with the correct list id, view id and base url. I used your code to check the references and they are correct. I checked all the functions in the SlideshowForSharePoint.js just in case something was not copied over correctly and all is fine. I’ve placed the CEWP which has a reference to the .js file. It’s on a wiki page and I know some of the code is running because I get the blue box with the silver border but no items are scrolling. I left viewFields as ‘Title’ to keep things simple. I’ve read thru all the comments multiple times and I’m at a loss as to what else to check. No errors are showing in the IE Developer Tools console.

    1. I have not looked at this for a while. It might be incompatibility with wiki pages, or maybe with the new jQuery version. Try the code in a regular web part page to see, and maybe try an older jQuery version to see if this helps.

      Alexander

      1. Yes, I found that is was the older jQuery method (.find) which has been replaced with .SPFilternode. The solution does work on wiki pages. Thanks for your reply.

  39. THANKS for the great tip. I have used it and is working wonderfully. However, I made my slide show large to take up the majority of the screen; this is problematic for those viewing the site on smaller monitors. Is there some code that I can add to the above that will make it auto-size to the viewers screen. I have made a couple of attempts to no avail.

  40. Hi
    I have used this slider, it works fine, but the problem is

    1. Some number ‘1300’ is visible between the description and the image, don’t know from where it is capturing that.
    when i searched using developers tool it is showing that there is a div ‘myScrollableDiv_item_1’ and ‘myScrollableDiv_item_0’ inside that it is creating some table with this text.
    How to remove this?

    2. I need to make the images clickale and on the click the image should open in new window in its original size, how to accomplish this?

    Need and urgent reply please.

    Thanks
    Paru

    1. Hi,
      I’m sorry, but I have not looked at this solution for several years, and don’t have it set up in any test environment. I would guess you had for example the ID column selected as “viewField” in the setup?

      I’m afraid I don’t have time to modify it for you, but you are free to use this solution as a starting point for your own modification.

      Alexander

      1. Hi Alexander

        Thanks for the reply,

        1. but i dont have ID Column selected i have viewFields’:[‘Title’,’Description’,’Preview’], these 3 columns, i am using it in a Sharepoint Wikipage.

        Do you have any idea now?

        2. Sure i can modify the code but can you help me with some hint how can do it. I am new to this. 🙁

        Thanks
        Paru

Leave a Reply

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