Wednesday, December 12, 2012

Rotating Banner for SharePoint using jQuery

With jQuery we can do lot of user interface enhancements in SharePoint. In this article, I'm exploring one of them: Add rotating banner for SharePoint using jQuery, Let our SharePoint site display moving top banner. Lets start building rotating banner for SharePoint!

jQuery Rotating Banner for SharePoint - Steps in Brief:
Here is how to create rotating banner in SharePoint

  1. Download and create necessary files
  2. Create the folder structure as explained below
  3. Create HTM file for banner Rotator. Update the links to point to your SharePoint site for images and JavaScript files in HTM and CSS.
  4. Add a Content Editor web part to the page, specify the banner HTM file.
Step 1: Download and create necessary Files
For SharePoint scrolling banner implementation, we need below files:
  1. jquery.min.js - Get it from: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
  2. jquery.cycle.all.js - http://cdn.jsdelivr.net/cycle/2.9999.6/jquery.cycle.all.js
  3. A CSS file to define styles for our rotating banner
  4. Banner images, and rotator control images (like Previous, Next, switch.)
  5. A HTML page which has rotating banner code!
for the last CSS and HTM files, You can refer: http://malsup.com/jquery/cycle/more.html?v2.23

Step 2: Create the Folder Structure
Head on to your SharePoint site, Create a Asset library (or even document library will do!) and create 3 sub folders:
  • A Folder for rotating banner scripts, say "scripts"
  • A Folder for Images, say "images"
  • and a folder for CSS Styles, say "styles"
So, Your Library and folder structure will look like:
jquery rotating banner sharepoint
Create a HTM and CSS file (You can refer online demos of the provides links)
Create a HTM file and CSS file from the content provided below. 

CSS File Content: say, Slider.css 

HTML File Conent: say, Banner.htm 
SharePoint 2010 JQuery Banner

Images: (6 Images)
create rotating banner sharepoint

add rotating banner sharepoint 2010

sharepoint 2007 rotating banner

rotating banner for sharepoint

 rotating banner sharepoint web part

SharePoint banner rotator





Download and upload these images to your SharePoint Library's images folder.

Step 3: Update the links in HTM and CSS files
Update the Links for Images, JavaScript files in HTM and CSS files.

Here is my scripts folder:

rotating banner script sharepoint
Here is my Images folder:
add rotating banner sharepoint
and the styles folder:
sharepoint 2010 rotating banner

Upload the files to relevant folders.

Add a Content Editor web part to the page, specify the banner html file.
sharepoint rotating banner web part
See Rotating banner for SharePoint 2010 using jQuery in action!
sharepoint rotating banner
Although, The above implementation talks about implementing jQuery Rotating banner for SharePoint 2010, it can be used in SharePoint 2007 or any of the web sites. It can be placed in master page even.

You can download the source code for jQuery banner rotator for SharePoint with scripts, images and CSS, here: Rotating Banner for SharePoint using jQuery. Don't forget to update the Links for Images, JavaScript files in HTM and CSS files.



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Five Challenges in SharePoint Security
...And How to Solve Them. Free White Paper
*Sponsored


Check out these SharePoint products:

39 comments :

  1. Hi, Could you share the demo code

    ReplyDelete
  2. Hi Salaudeen, can you give me your email?
    I'll really appreciate if you could share me the code
    Thank you !

    ReplyDelete
    Replies
    1. Hi Can you send me the code too working on this and looks good

      Delete
  3. Hi sir,

    can share the code to merge word documents in document library using sharepoint.

    thank you

    ReplyDelete
  4. Dear Salaudeen,
    Can you send me the code.

    ReplyDelete
    Replies
    1. All: Source code has been Shared at the end of the article!

      Regards,
      Salaudeen Rajack

      Delete
  5. Thanks for the code.

    It was very helpful

    ReplyDelete
  6. Really thanks
    but it doesn't work with internet explorer
    anyhelp please..

    ReplyDelete
    Replies
    1. Did you change the URL Path for JQuery, CSS files?

      Delete
    2. yes i change it to be Compatibe with my site..
      i put the full URL http:\\-----\slider.css
      is that right??

      Delete
  7. Hello Salaudeen,

    Thanks for the source code. I am not sure why it is not working for me. I changed the url path in the htm and css file. But it is giving an error saying "Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator." Can you help, please?

    ReplyDelete
    Replies
    1. Are you referencing content from another site collection? If Yes, you will have to enable anonymous access on it to resolve this issue.

      Refer: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.contenteditorwebpart.contentlink.aspx

      Delete
  8. You save my morning, THX !!!!

    ReplyDelete
  9. how can we make it read from the library with as many number of images

    ReplyDelete
    Replies
    1. using CQWP or jQuery SPService we can achieve it! Will post an another article as and when time allows me.

      Delete
    2. Thanks for this great post!

      Agree with the previous comment, please post another article using CQWP to display images from.
      Looking forward to seeing new article.

      Delete
  10. Hi,
    Great Article...

    I am ShrePoint admin... it will great if you can share the code with me...

    my email address: gyansh04@gmail.com

    Regards
    Gyan Shukla

    ReplyDelete
    Replies
    1. Gyan,

      Source code Download link provided in end of the article!

      Delete
  11. If I wanted to adjust the entire size of the banner, how would I do this? Do I need to change each individual value in the css file?

    ReplyDelete
    Replies
    1. Yes! Image sizes are specified in the CSS file.

      Delete
  12. could u send me the code
    natchimuthu@gmail.com

    ReplyDelete
    Replies
    1. Download link provided at the end of the post!

      Delete
  13. Hello I know there is a download link at the end of the article but the Turkish goverment has blocked sites.google.com
    Colud you please share with me the source code
    Thanks&Regards
    seserkan@gmail.com

    ReplyDelete
  14. Can you send me source code to emailjeff2000@yahoo.com

    ReplyDelete
  15. Hi, all the above works when I click on the banner .html from the document library. Bur when I give its Content link on the Content widget, the banner doesnt display properly. It displays as stacked images on one top of another. Any idea how to resolve?

    ReplyDelete
  16. Hi, I'm using MOSS 2007 and have followed your instructions to create the slider.

    In Internet Explorer 8 it is displaying and the images rotate as they should, but the pager and the prev/next buttons aren't showing. It works perfectly in Chrome, just not in IE. Do you have any fix for this?

    Can get me on danny.levan@collectionhouse.com.au

    Danny

    ReplyDelete
  17. I like this! It works great in Firefox, but does not work well in IE 9 (with or without compatibility mode). The arrows do not appear the the page indicator that the bottom is shifted too far left. I even updated my jquery libraries, but no change.

    ReplyDelete
    Replies
    1. Pretty simple, I just figured that one out. you need to update the link refs in the slider.css as well ;)

      Delete
  18. Very nice article... just what I've looking for... for several days now.
    Worked very well for me on IE10... However, I don't see the previous and next images... I don't see the bottom image either... I can see just a gray area below the text.

    it would be nice if I can make it to work 100% just as you have it in this post... do you think I'm missing something? probably need some other changes in the scripts or something?

    let me know... thanks.... and again... congrats... really nice post.

    ReplyDelete
  19. Hi In my case I have to keep changing pic and uploading new pics too. Please suggest where all and what need to change. thanks.

    ReplyDelete
    Replies
    1. Having a Library with Pictures and Text - Rotating them using JQuery/CSOM would be the optimal solution! In SharePoint 2013, this is relatively easy with Display templates.

      Delete
  20. Hi Salaudeen, I have copy pasted the code in banner.html and tried using one more pic 4.jpg. But its not working. Anywhere else I need to change the code.

    ReplyDelete
  21. Please, could you send me the code to the.master.jose@gmail.com

    Thank you

    ReplyDelete
  22. pls send me code which includes images,css ,html code on vijay.verma@wns.com as i am not able to download the code from the link given above

    ReplyDelete
  23. All is working perfectly in Chrome and Firefox, but soens't fully work in IE. the arrows and the bar below inlcuding opacity is not wrking in IE, Someone here who can make it work the same for IE ?

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...