Type Issue undefined is not a function jQuery Plugin

**alisamii** · Oct 25, 2012 10:42

I am getting an undefined function error when I try calling a jQuery plugin that I have installed in my site.
The plugin code is relatively simple.

Code:

/*
* polarisSlider v1
* Last Updated: October 25, 2012

* This is a very simple and convenient slider/fader to transition between images or content. it offers only fade and slide transitions to keep the script
* as lightweight as possible.

* Developed by Mediacom
* Modified from code developed by Jeffrey Way
* http://mediacom.net
* info@mediacom.net
*/


(function($) {

    $.fn.polarisSlider = function(options) {

        // set default options
        var defaults = {
            speed : 1000,
            pause : 2000,
            transition : 'fade'
        },

        // Take the options that the user selects, and merge them with defaults.
        options = $.extend(defaults, options);

        // Needed to fix a tiny bug. If the pause is less than speed, it'll cause a flickr.
        // This will check for that, and if it is smaller, it increases it to just about the options.speed.
        if(options.pause <= options.speed) options.pause = options.speed + 100;

        // for each item in the wrapped set
        return this.each(function() {

            // cache "this."
            var $this = $(this);

            // Wrap "this" in a div with a class of "slider-wrap."
            $this.wrap('<div class="slider-wrap" />');

            // Set the width to a really high number. Adjusting the "left" css values, so need to set positioning.
            $this.css({
                    'width' : '99999px',
                    'position' : 'relative',
                    'padding' : 0
                });

                // If the user chose the "slide" transition...
                if(options.transition === 'slide') {
                    $this.children().css({
                        'float' : 'left',
                        'list-style' : 'none'
                    });

                    $('.slider-wrap').css({
                        'width' : $this.children().width(),
                        'overflow' : 'hidden'
                    });             
                }

                // If the user chose the "fade" transition, instead pile all of the images on top of each other.
                if(options.transition === 'fade') {
                    $this.children().css({
                        'width' : $this.children().width(),
                        'position' : 'absolute',
                        'left' : 0
                    });

                    // reorder elements to fix z-index issue.

                    for(var i = $this.children().length, y = 0; i > 0; i--, y++) {      
                        $this.children().eq(y).css('zIndex', i + 99999);
                    }   

                    // Call the fade function. 
                    fade();
                }

                // If the user instead chose the "slide" transition, call the slide function.
                if(options.transition === 'slide') slide(); 


                function slide() {
                    setInterval(function() {
                        // Animate to the left the width of the image/div
                        $this.animate({'left' : '-' + $this.parent().width()}, options.speed, function() {
                            // Return the "left" CSS back to 0, and append the first child to the very end of the list.
                            $this
                               .css('left', 0)
                               .children(':first')
                               .appendTo($this); // move it to the end of the line.
                        })
                    }, options.pause);
                } // end slide

                function fade() {
                    setInterval(function() {
                        $this.children(':first').animate({'opacity' : 0}, options.speed, function() {   
                            $this
                               .children(':first')
                               .css('opacity', 1) // Return opacity back to 1 for next time.
                               .css('zIndex', $this.children(':last').css('zIndex') - 1) // Reduces zIndex by 1 so that it's no longer on top.                  
                               .appendTo($this); // move it to the end of the line.
                        })
                    }, options.pause);
                } // end fade           

            }); // end each     

        } // End plugin. Go eat cake.

    })(jQuery);

The html side of things is a ul that is in a div container:

Code:

<div class="slideshow">
    <ul id="slides">
        <li><img src="images/slide1/commercial-insurance-107807003.jpg" alt="Commercial Insurance"></li>
        <li><img src="images/slide1/employee-benefits-86250418.jpg" alt="Employee Benefits"></li>
        <li><img src="images/slide1/fine-arts-5384764.jpg" alt="Fine Arts"></li>
        <li><img src="images/slide1/personal-insurance-101341654.jpg" alt="Personal Insurance"></li>
        <li><img src="images/slide1/risk-management-96075848.jpg" alt="Risk Management Planning"></li>
    </ul>
</div>

And the script gets called using the following code:

Code:

<script type="text/javascript" charset="utf-8">
        $('ul#slides').polarisSlider({
            speed : 2500,
            pause : 3000
        });
</script><!--End polarisSlider-->

Any help would be appreciated.

I have zipped site up (very small, 592K zipped) and attached it here so if someone could take a closer look, I'd appreciate it.

polaris4.zip