This is a simple news slider I put together using SharePoint web services, jQuery and the Easy Slider Plugin from CSS Globe. You can get the plugin here. The Web Part points to the local site’s Annoucements list and display the title, body and a link to view the item. The jQuery connection to the SharePoint web service is based on code from Jan Tielens.
4 simple steps.
- Paste the code below into a Content Editor Web Part (CEWP) on your page.
- Change the link to jQuery if needed. The code references the jQuery library on Google Code so if you are working in an isolated environment or already have jQuery on your server just change the link (its on the first line).
- Put the Easy Slider code in a document library and adjust the link to it on the second line of the code.
- Update the CSS to match your site (The CSS can be moved to an external file or added to your custom theme).
/*Change this to point to the plugin file on your sever */
Announcements with really long bodies will get cut off because the div that holds the contents has a fixed height. This can be adjusted in the CSS. Long titles could also cause a problem if they wrap to multiple lines. One other thing to watch out for is inline styles applied by the WYSIWYG editor on the body of the announcement. They can override the default styles and cause items to look different.
Changing whats displayed
To change which fields are displayed edit the section and add a tag for the fields you want to reference. If you have customized your list or renamed fields the names that appear on the column headings and on the list settings page may not be correct. The fastest way to find the real name of a field is to go to the list settings page and click on the name of the column to edit it. On the edit page look at the very end of the URL and it will say Field=[real name of your field].
Once you have edited the added the all you need to do is edit the liHtml var to include the new field in the output html. To show the field just use this $(this).attr(“ows_MyFieldName”).
New Stlyes for the slider. A little less grey and will match better with a default SharePoint theme