jquery - Issue Implementing jQuery Nivo Slider

Question

I was able to implement the jQuery Nivo Slider in my JSFiddle: http://jsfiddle.net/NinjaSk8ter/gXwuc/

However I'm having a problem getting this to function in my Page. If someone is able to see the problem within my JavaScript I would greatly appreciate it.

I think that the issue is because I am already calling the jQuery Ready function for a different Script.

I had added ('#slider').nivoSlider(); within it's own ready function which does not work:

$(function () {
    $('#slider').nivoSlider();
});

Here is the Development Site: http://www.northernvirginiapaintingcontractor.com/

There are 2 jQuery Document Ready Functions:

<script type="text/javascript">
$(function () {
    $('.box').hover(function () {
        $(this).stop().animate({
            "opacity": .5
        }, 50)
    }, function () {
        $(this).stop().animate({
            "opacity": 1
        }, 50)
    });
});

$(function () {
    $('#slider').nivoSlider();
});

</script>

Here is the markup:

<div id="top-feature">
    <div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios"></a>
        <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="http://i.imgur.com/DMWEZ.jpg" alt="" />
                <a href="http://dev7studios.com">
                    <img src="http://i.imgur.com/GnASW.jpg" alt="" title="caption" />
                </a>
                <img src="http://i.imgur.com/5y96P.jpg" alt="" data-transition="slideInLeft" />
                <img src="http://i.imgur.com/9eg2i.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> example <em>HTML</em> caption<a href="#">a link</a>.
            </div>
        </div>
    </div>
</div>

Answer 1

For some reason this works in the Page, and I am not completely clear why:

jQuery(function ($) {
    $('#slider').nivoSlider();
});