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.
Installation
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).
Code
/*Link to jQuery change this to point to where you have the jQuery files */
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
/*Change this to point to the plugin file on your sever */
<script type="text/javascript" src= js/easySlider1.5.js></script>
<script type="text/javascript">
$(document).ready(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Announcements</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Body' /> \
<FieldRef Name='ID' /> \
<FieldRef Name='FileDirRef' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function() {
var teaser = $(this).attr("ows_Body");
var teaserText = teaser.slice(0,500);
var urlValue = $(this).attr("ows_FileDirRef");
var urlArray;
var urlName;
if (urlValue == undefined)
{
urlName = "- - -";
}
else {
urlArray = urlValue.split(";#");
urlName= urlArray[1];
}
var liHtml = "<li><h5>" + $(this).attr("ows_Title") + "</h5><p>" + teaserText +
"<br/><a class='readMore' href='/" + urlName + "/Dispform.aspx?ID=" + + $(this).attr("ows_ID") + "'>Read More<a/></p></li>";
$("#tasksUL").append(liHtml);
});
$("#slider").easySlider({
controlsBefore: '<div id="controls2">',
controlsAfter: '</div>',
auto: true,
continuous: true,
//vertical: true,
prevText: '< Prev',
nextText: 'Next >',
speed: 1000,
pause: 4000
});
}
</script>
<style type="text/css">
#slider{font-size:x-small; background:#E2EFFF;}
#slider h5{padding:5px; font-size:small; color:#315F9B; letter-spacing:-1px; line-height:20px;margin:0px;}
#slider div {font-size: x-small; padding:0px; margin:3px;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:600px; height:241px; overflow:hidden; padding:0px;}
#controls2 {padding:3px 0 0 0; text-align:right; width:600px;}
.readMore {margin:3px;padding:2px;background:#F7FBFF;}
#prevBtn, #nextBtn{}
#nextBtn{}
#prevBtn a, #nextBtn a{font-size:x-small;}
#nextBtn a{}
</style>
<div id="slider">
<ul id="tasksUL"/>
</div>
Enjoy
Notes
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”).
Upate
New Stlyes for the slider. A little less grey and will match better with a default SharePoint theme
<style type="text/css">
#slider{font-size:x-small; background:#E2EFFF;}
#slider h5{padding:5px; font-size:small; color:#315F9B;
letter-spacing:-1px; line-height:20px;margin:0px;}
#slider div {font-size: x-small; padding:0px; margin:3px;}#slider ul, #slider li{margin:0; padding:0; list-style:none;}#slider li{width:600px; height:241px; overflow:hidden; padding:0px;}#controls2 {padding:3px 0 0 0; text-align:right; width:600px;}.readMore {margin:3px;padding:2px;background:#F7FBFF;}#prevBtn, #nextBtn{}#nextBtn{}#prevBtn a, #nextBtn a{font-size:x-small;}#nextBtn a{}</style>
Conclusion
This is very basic but provides some nice functionality and can be easily styled to match your site. Because it uses the web service instead of a data view webpart it is portable and will work on any site with an announcements list. With some more work on the JavaScript it would be simple to limit the amount of text from the body that is displayed.
Pingback: Dave Cavins » Blog Archive » SharePoint Vertical News Ticker
Pingback: Dave Cavins » Blog Archive » CSS-Tricks AnythingSlider in SharePoint
That’s exactly what I was looking for. 🙂 I was trying to include a Slider script in SharePoint, but it just didn’t work the way I wanted.
This is really cool, because it pulls the data out of an announcement list instead of html code! Thanks!
I can’t seem to get this to work on my site. It reads the announcements list fine. But, it displays all of them from top to bottom without the “next” and “previous” buttons and no sliding.
Check and make sure the javascript files are linked up properly. The functionailty you are missing all comes from the javascript files. Is the page showing a Javascript error?
I am wondering what could be cuasing jquery not to run properly on the site when it is referencing internal MOSS lists!
a jquery working with in-code html list items is OK but once i try to load a list via soap, nothing is shown ,no error, no display…
I am thinking that this could be the same issue as RSS/XML webparts not supporting authenticated internal lists!
Thanks
@Fadi I have used the SOAP method in environments where authenticated feeds are not supported and it worked fine. Check and make sure the list name is correct in the SOAP envelope. I like using the SOAP/wweb service method but it is very picky and easy to break.
Hi Dave,
I’m having a little problem: I’ve adjusted the height in the CSS and I can clearly see that there is enough space for at least two more lines, but my text gets cut off in the middle of a row as if there was a maximum number of characters. Do you have an idea what the problem could be?
Thanks
Nicole
There is a character limit set in the javascript.
This code gets the first 500 characters of the body of the announcement. Just change 500 to a larger number if you want to show more text. Hope this helps.
Thanks, Dave! Looks much better now. 😉
One more question: is there a way to make the sliding stop when you click or mouseover, so that people can read without having to go back all the time?
I’m having the same problem as @FADI.
I add the code to a CEWP and nothing is shown ,no error, no display. Any ideas how to troubleshoot?
Thanks.
@Frank – In the past I have tried adding alerts to the script just to be sure it is firing. I plan to rewrite this script one day because so many people have had issues with it not working.
Thanks Dave for the very informative post. I was just able to get the slider to work perfectly within IE and Firefox, but only the Prev and Next shows up in Safari, Opera and Chrome. Do you have any idea why?
@ Marty I have not tested the script in those browsers but it is probably an issue in the CSS. Verify that the elements are being created on the page and then adjust the CSS. You might need to specify a height for #slider
@Dave, thanks for the assistance. I’ve actually added the height and width to #slider and it now at least has the same height and width as with IE and FF, but content is still not showing (still shows in IE and FF). I will try and play with the CSS to see if there is a reason the content is not showing.
Thanks again!
Well, it ended up not being the CSS, but rather the coding for the dwp. I had to replace
$(xData.responseXML).find(“z\\:row”).each(function() {
with
$(xData.responseXML).find(“[nodeName=z:row]“)
Everything seems to work great now in all browsers. Apparently Safari, Chrome and Opera do not recognize the z:row namespace that the SharePoint Lists Web Service GetListItems operation returns.
Thanks again for the work you put in!
Thanks….saved my time….i was trying this…with SharePoint 2010 CEWP….faced few…reference issues…but finally able to resolve them……
Hi Dave,
When I drop the code in a CEWP and change the code to reference the Easy Slider file in my doc library, I get the below error:
None Use for formatted text, tables, and images. true g_DB2EDDC37E7B4778AFA48D2DEE22877B 1 Normal true true true true true true true Modeless
Default
Cannot import this Web Part. /_layouts/images/mscontl.gif Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c Microsoft.SharePoint.WebPartPages.ContentEditorWebPart
I wasn’t sure what to do with the Easy Slider CSS file, so that could be the cause. Any tips or ideas?
Thanks!
Ethan
Thanks Dave, this is a very neat solution.
My next challenge: Can I add a parameter to the URL’s I publish so that I can link to a particular item within the slideshow (i.e. so that it becomes the first slide displayed).
E.g. The Announcement items each have an ID. Is there a way to use this in the page URL so that the first slide displayed can be changed?
Alternatively, does anyone have another way of linking to an individual item once using a slideshow?
I had an update to your code to make it easier for less advanced users to use as well as allow the web part to be used on any page. Previous posted version only worked on default.aspx
Hope it helps.
Ed
//List must be the Announcement list
//Change path to the site or subsite Make sure to leave off the “/default.aspx”
mySiteUrl = “http://SharePoint.myserver.com/sites/EAE”
//Create local copies of the jquery-1.3.2.min.js and easySlider1.5.js files below
$(document).ready(function() {
var soapEnv =
” \
\
\
Announcements \
\
\
\
\
FieldRef Name=’ID’ /> \
\
\
\
\
“;
$.ajax({
url: mySiteUrl + “/_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\””
});
});
function processResult(xData, status) {
$(xData.responseXML).find(“z\\:row”).each(function() {
var liHtml = “” + $(this).attr(“ows_Title”) + “View Item” + $(this).attr(“ows_Body”) +””;
$(“#tasksUL”).append(liHtml);
});
$(“#slider”).easySlider({
controlsBefore: ”,
controlsAfter: ”,
auto: true,
continuous: true,
//vertical: true,
prevText: ‘<>’,
speed: 1000,
pause: 4000
});
}
#slider{border-bottom:2px solid #ccc; background:#e7e8e9; padding:1px; font-size:x-small;}
#slider h5{font:italic medium Georgia, Times, serif; color:white; padding:3px; margin-bottom:-10px; background:#990033;}
#slider h5 span{text-transform:lowercase; padding:5px; font:x-small normal Arial, Helvetica, san-serif;}
#slider div {font-size: x-small; padding:3px;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:600px; height:241px; overflow:hidden; padding:0px;}
#controls2 {padding:3px 0 0 0; text-align:right; width:600px;}
#prevBtn, #nextBtn{}
#nextBtn{}
#prevBtn a, #nextBtn a{font-size:x-small; background-color:#ccc; color:#444; padding:2px; text-decoration:none;}
#nextBtn a{}