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.
/*
* 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:
<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:
<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.