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
- 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.
For SharePoint scrolling banner implementation, we need 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!
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"
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:
Upload the files to relevant folders.
Add a Content Editor web part to the page, specify the banner html file.
You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.