Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In
SharePoint By Bugday > Posts > Add JQuery, CSS and Nivo Slider to Office 365 SharePoint
November 23
Add JQuery, CSS and Nivo Slider to Office 365 SharePoint

There’s a bunch of posts and articles on the web about adding JQuery and CSS to SharePoint and Office 365 and here’s my contribution of adding CSS, Jquery and the Nivo Slider to SharePoint 2013!

 

Here’s my post on how to connect to Office 365 using SharePoint Designer 2013:

SharePoint 365 using SharePoint Designer 2013

1. Start by downloading JQuery and add the files to a local folder:

http://jquery.com/

image

2. Download the Nivo Slider to a local folder:

http://nivo.dev7studios.com/pricing/

image

3. Extract all the files

4. Upload the extracted *.js files to your SharePoint Site Collection URL(On-Premise or Office 365):

I put them in a directory called js that i created under Site Assets:

image

5. Upload the extracted *.css files to a folder called styles i created under site Assets:

image

Also put all the Nivo Slider theme files in a folder that you created called themes in Site Assets:

image

also, put the images you want for the Nivo slider in a folder that you create called images in the Site Assets library:

image

6. Now, go ahead and add the reference to this files using the master page:

Add the following lines just above the closing </head> tag:


    <SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/berlin.css %>" runat="server" EnableCssTheming="true" />
    <SharePoint:ScriptLink ID="ScriptLink1" runat="server" Defer="False" Name="~siteCollection/SiteAssets/js/jquery-1.8.3.min.js">
    </SharePoint:ScriptLink>
    <SharePoint:ScriptLink ID="ScriptLink2" runat="server" Defer="False" Name="~siteCollection/SiteAssets/js/jquery.nivo.slider.pack.js">
    </SharePoint:ScriptLink>
    <link rel="stylesheet" href="../../SiteAssets/styles/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../SiteAssets/styles/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../SiteAssets/styles/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../SiteAssets/styles/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../SiteAssets/styles/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../SiteAssets/styles/style.css" type="text/css" media="screen" />
    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    </script>

image

7. Go to your SharePoint site(either on-premise or SharePoint 365) and create a new page called Nivo.aspx:

image

8. Choose edit on the ribbon bar for the nivo.aspx page:

image

9. Add the following DIV and html:

<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="/siteassets/images/toystory.jpg" data-thumb="/siteassets/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="/siteassets/images/up.jpg" data-thumb="/siteassets/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="/siteassets/images/walle.jpg" data-thumb="/siteassets/images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="/siteassets/images/nemo.jpg" data-thumb="/siteassets/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>
image

10. Hit save and then publish this draft:

image

11. Now you’ll have a working Nivo Slider and Jquery in your SharePoint 2013!

image

Have fun!

Comments

Cannot get the XML to validate

Edit
I keep getting The value of attribute "Name" associated with an element type "SharePoint:CssRegistration" must not contain the '<' character.
 on 3/26/2014 6:42 PM

Background issue

Edit
After applying the slider, the background get's messed up. It now repeats itself. How can this be fixed?
 on 3/28/2014 11:35 AM

Background issue solved

Edit
By deleting:

<link rel="stylesheet" href="/SiteAssets/style.css" type="text/css" media="screen" />

 on 3/28/2014 11:46 AM

REST API

Edit
Great solution! Thanks for the code. Don't you want to call the images dynamically e.g. from a Picture Library instead of putting it hardcoded in the HTML?

I also found a solution working with SP2013 REST API, if you like to use it!

http://bastiaanjacobs.nl/2014/04/09/sharepoint-2013-rest-slideshow/
 on 4/10/2014 11:34 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


E-Mail *


TodayIs *


What's today's abbreviated value(DDD)

Attachments