Easy drag and drop nivo slider!

#1 kingy da killa

Free man on the land

Group: Members
Posts: 2,144
Joined: 24-November 10
Reputation: 94
Gender:Male
Location:London SW
Experience:Intermediate
Area of Expertise:Web Developer

Posted 30 September 2011 - 02:18 PM

If anybody has had trouble getting the nivo slider to work, I have created the simplest solution to work out of the box on any project!

Steps to use
============

1. unzip, then place the folder 'nivo' into your main directory

2. go into nivo folder (on your desktop) open the index.html file.

Copy and paste

<link rel="stylesheet" href="nivo/nivo-slider.css" type="text/css" media="screen" />

into your <head></head> section.

Then copy and paste

<div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="nivo/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="nivo/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="nivo/images/walle.jpg" alt="" />
                <img src="nivo/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>
    <script type="text/javascript" src="nivo/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

into where you want your slider to be.

Finished!

This post has been edited by kingy da killa: 30 September 2011 - 02:20 PM

#2 zed

Web Guru

Group: Moderators
Posts: 4,941
Joined: 25-May 10
Reputation: 703
Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 30 September 2011 - 04:01 PM

just be careful when you copy/paste that you've not already got or put the jquery stuff elsewhere. Much easier to have it all in one place and then you consistently know where to look.

#3 roothost

Currently accepting new clients

Group: Members
Posts: 1,463
Joined: 06-February 11
Reputation: 73
Gender:Male
Location:Lewes, East Sussex
Experience:Intermediate
Area of Expertise:Web Designer

Posted 30 September 2011 - 07:38 PM

^This

I always have one main js file with it all nicely located in there.

#4 rallport

Web Guru

Group: Members
Posts: 3,818
Joined: 03-January 10
Reputation: 266
Gender:Male
Location:England, UK
Experience:Advanced
Area of Expertise:Web Developer

Posted 05 October 2011 - 05:41 PM

All thatr code sia festering mess of bad practices unfortunately:

The code you've posted most definately will not work any project
Inline javscript
Not using a CDN with fallback to serve JQuery
Loading the Jquery Library within your main HTML - stick it in the footer

Still not sure why we even need something like this guide either - as it's pretty much a copy and paste job from http://nivo.dev7stud...y-plugin-usage/

This post has been edited by rallport: 05 October 2011 - 05:42 PM