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 by Step:
Here is how to create a rotating banner in SharePoint
- Download and create necessary files
- Create the folder structure as explained below
- 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 the below files:
- jquery.min.js – Get it from: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
- jquery.cycle.all.js – http://cdn.jsdelivr.net/cycle/2.9999.6/jquery.cycle.all.js
- A CSS file to define styles for our rotating banner
- Banner images, and rotator control images (like Previous, Next, switch.)
- 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 an Asset library (or even document library will do!), and create 3 subfolders:
- 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:
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
Images: (6 Images)
Step 3: Update the links in HTM and CSS files
Here is my scripts folder:
Here is my Images folder:
and the styles folder:
Upload the files to relevant folders.
Add a Content Editor web part to the page, specify the banner html file.
See Rotating banner for SharePoint 2010 using jQuery in action!
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.
Download all Scripts/Images/Code for this banner:
You can download the source code for jQuery banner rotator for SharePoint with scripts, images and CSS, here: