jQuery – Announcement carousel for SharePoint


The Annoucements Carousel
Your web part should look like following image (announcements.jpg). You will see all the announcements scrolling one by one, Announcement items are linked to the actual announcement page. When you hover the mouse pointer over a news item, the scrolling will stop automatically.

Note: All the required files can be downloaded from GitHub – jQuery SharedCode is pasted in the email body for reference.
Overview
Recently I have been working on jQuery Carousel plug in and SharePoint. Accidently/fortunately I was able to develop an announcement carousel solution. I thought of posting this to the broader audience. I find this really useful as we can show all the announcements in the smaller area.
Prerequisites
Make sure you have an announcements list in your SharePoint site with some sample announcements.
Step 1 – Required JavaScript and CSS file.
Following files are required for this carousel functionality.
          jQuery library – jQuery 1.4.1 library,  you can download it from the jQuery site.  I love to rename it to jQuery-latest.min.js.  I have used jQuery-1.4.2.min.js
          jCarousel script –I have updated the original jCarousel script for hoverPause functionality as per the comments given in the plug in page.  Make sure to use the same.
          News-Ticker-Source.js – this file contains the actual source code to query the announcements links and making it carousel. Make sure to replace {Site Url} with your site url.
          News-ticker.css – Contains style sheet for the announcements list.
The folder structure that I followed in my site is as following, highlighted the folders in the hierarchy.
          Shared Documents
o   BIN
§  JQLIB – this folder contains all the JavaScript files
·         jQuery-latest.js
·         jcarousellite_1.0.1.hoverPause.js
·         news-ticker-source.js
§  CSS –  this folder contains folder for the style sheet and required images
·         News-ticker : Folder for the style sheet.
o   Images: folder for images
§  News1.jpg
§  Mic1.jpg
o   News-ticker.css : CSS filefor styling.
Note: I have given this folder structure since my code has all the references based on this folder structure, however you can have your own folder structure; make sure to update the references in the HTML script and news-ticker-source.js files.
Step 2 – The JavaScript Code
All the required files are attached with this email. Still thought of putting the code of news-ticker-source.js on to this post.
$(document).ready(function()
{
                //Call the method to read data from annoucements list and display it as carousel.
                GetAnnoucementData();
});
/*
This function reads the data from annoucement list and passes the control to processResults method
This makes and ajax call to lists.asmx web service.
Make sure to replace {Site URL} with your SharePoint site url.
*/
function GetAnnoucementData()
{
//Prepare the SOAP envelop for calling GetListItems method from lists.asmx web service
var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
   <soapenv:Body> \
     <listName>Announcements</listName> \
     <viewFields> \
      <ViewFields> \
                                 <FieldRef Name=’ows_ID’ /> \
                                 <FieldRef Name=’LinkTitleNoMenu’ /> \
                                 <FieldRef Name=’Body’ /> \
                                 <FieldRef Name=’Expires’ /> \
                                 <FieldRef Name=’Author’ /> \
      </ViewFields> \
     </viewFields> \
    </GetListItems> \
   </soapenv:Body> \
  </soapenv:Envelope>”;
/*Post the request envelop to web service thorugh ajax request and pass the results to processResults method*/                                      
        $.ajax({
            url: “{SITE URL}/_vti_bin/lists.asmx”,
            type: “POST”,
            dataType: “xml”,
            data: soapEnv,
            complete: processResult,
            contentType: “text/xml; charset=\”utf-8\””
        });   
}
/* This method parses the resultant xml and prepares the display.
Please replace {Site Url} with your sharepont site url.
*/
function processResult(xData, status)
{
                                //Select the root element.
        var newnews =$(“#newsItems”);
        var rows;
                               
                                //Check if query returns no rows
        if (xData.responseXML.getElementsByTagName(“z:row”).length==0)
        {
                                                //Prepare the display for 0 rows.
                                                var url = “{SITE URL}/Lists/Announcements/”;
                                                var head = “<li><div class=’thumbnail’> <img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg’></div>”;
            var body = “<div class=’info’>No news items<a href=” + url + “> Read all</a> <span class=’cat’> no items found</span></div>”;
                                                var tail = “<div class=’clear’></div></li>”;
                                                var liHtml = head + body + tail;
                                               
                                                //Append the HTML element to newNews element
            newnews.append(liHtml);
        }
        else
        {
                                                //Read all the rows from responseXml
                                                rows = xData.responseXML.getElementsByTagName(“z:row”);
                                                jQuery(rows).each(function()
                                                {
                                                //Read the information from returned rows
            var url = “{SITE URL}/Lists/Announcements/DispForm.aspx?ID=” + $(this).attr(“ows_ID”);
                                                var title = $(this).attr(“Title”);
                                                var news = $(this).attr(“ows_Body”);
                                                var author = $(this).attr(“ows_Author”);
                                                author = author.split(‘#’)[1];
                                                //Prepare the div element
                                                var head = “<li><div class=’thumbnail’><img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg’></div>”;
            var body = “<div class=’info’><a href=” + url + “>” +  $(this).attr(“ows_Title”)+ “</a> <span class=’cat’>by ” + author + “</span></div>”;
                                                var tail = “<div class=’clear’></div></li>”;
                                                var liHtml = head + body + tail;
                                                //Append the resultant element onto newNews element
            newnews.append(liHtml);
                                                });
        }
                               
                                //Append entire newNews element to root Div
                                newnews.appendTo(“.newsticker-jcarousellite”);
                               
                                //Prepare the Carousel of all the returned items
                                $(“.newsticker-jcarousellite”).jCarouselLite({
                                vertical: true,
                                hoverPause: true,
                                visible: 4,
                                auto:500,
                                speed:1000
                                });
    }
Step 3 – The HTML Script
Add a content editor web part on your home page and add following HTML Script in the source editor. (Make sure to update the references of script and css files, replace {SITE URL} with your site url).
<link rel=”stylesheet” href=”{SITE URL}/Shared%20Documents/BIN/css/news-ticker/news-ticker.css” type=”text/css” media=”screen” />
<script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jquery-latest.min.js” type=”text/javascript”></script>
<script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jcarousellite_1.0.1.hoverPause.js” type=”text/javascript”></script>
<script src =”{SITE URL}/Shared%20Documents/BIN/jqlib/news-ticker-source.js” type=”text/javascript”></script>
<div id=”newsticker-demo”>   
     <div class=”newsticker-jcarousellite”>
                                <ul id=”newsItems”>
        </ul>
    </div>
</div>
<div id=’status’></div>
References
          http://sorgalla.com/jcarousel/
Regards, Sudhir Kesharwani MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET 
Advertisements

25 thoughts on “jQuery – Announcement carousel for SharePoint

  1. Hi,I have posted this thorough email, I was not sure if attachments are supported in the blogs or not.The source code is not attached with this blog.If anyone wants the code, please reach out to me.

  2. Nice solution. some points i can make out here is, we can only have announcement data from a given list. so no rollup functionality, We can have Content Query WP to get the rollup functionality, i guess this would be another reusable great solution 🙂

  3. Hi,

    Am looking for a horizontal carousel..Could u suggest what changes need to be done..
    basically i need a marquee tag to append the values instead of newnews.appendTo(“.newsticker-jcarousellite”);

    Thanks

  4. Hi Sudhir,

    Excellent solution, I have used it in my sharepoint site. But it throws
    “permission denied” in IE 6.0, is that expected? Do you have a work around.
    Any help is greatly appreciated.
    Thanks
    Akash

    • Akash,

      Sorry for delayed response, does it only occurs when you use IE6, did you tested this in other browsers.

      I doubt if it is due to the latest version of jQuery. Try using the older version of jQuery if that helps you in removing the error.

      Hope this helps…

  5. Great work. I truly appreciated jQuery – Announcement carousel for SharePoint | sudhirke.
    I pray you don’t mind me just saying this nevertheless it brought to mind rf preamplifier which I find out about on an alternative internet site.

  6. Does your site have a contact page? I’m having problems locating it
    but, I’d like to send you an email. I’ve got some creative ideas for your blog you might be interested in hearing.
    Either way, great site and I look forward to seeing it expand over time.

  7. Hi Am trying to use this but unfortunatelty its not reading my list name and items and always its show no items to display.
    Am using SharePoint 2010
    Please help

    • Princy,

      Please double check your list name and URL. it will happen if the script is not able to locate your list. jQuery solution is not really dependent on SharePoint versions, I have seen scripts working fine from SharePoint 2007 — till SharePoint 2013 even Office 365.

      ~ sudhir

      • can u let me know how to put the URL .because on clicking on it its redirected to that list but list is not read.
        Or Do u think it might be the issue of Jquery version?

        thanks
        Princy

      • Princy, you will have to make sure that your list name is “Announcements” and you will update the URL in the ajax request. Replace {SITE URL} with exact SharePoint site url. Make sure that logged in user has read permission on the list.

        url: “{SITE URL}/_vti_bin/lists.asmx”,

  8. Hi Sudhir
    i have tried your solution is 2016 and it doesnt work for me. the supporting files have been uploaded to the Site Assets Library, and nothing is pulling through. Where could i possibly be going wrong?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s