jqueryPluginWithParams

plugin with parameters and settings

by oterox

HTML

<div id="home-slider">
        <div><p>image 1</p></div>
        <div><p>image 2</p></div>
        <div><p>image 3</p></div>
        <div><p>image 4</p></div>
        <div><p>image 5</p></div>
        <div><p>image 6</p></div>
	</div>
	<p class="debug">debug:<span></span></p>
    <a href="" class="ext1">go to first slide</a><br>
    <a href="" class="ext2">go to slide 2</a><br>
    <a href="" class="ext3">go to last slide</a><br>
    <a href="" class="ext4">total</a><br>
    <a href="" class="ext5">current</a><br>

CSS

.clear { clear: both; }
		body { margin: 100px auto; width: 400px; }
		* { border: 0; padding: 0; list-style: none; }

		.px-slider-container {
			margin:0 auto;		
			overflow:hidden; 
			position:relative;
            background: #FBFBFB;
		}
#home-slider p { text-align: center; padding: 20px; }

		/**
		* Navigation
		*/
		.px-control {
			display:block;
			position:absolute;
			z-index: 200;
			background: #FFF;		
		}
		#px-left {
			top:10px;
			left:0;
		}
		#px-right {
			top:10px;
			right:0;
		}
		#px-left.disabled, 
		#px-right.disabled { 
			cursor: default;
			color: #CCC;
			text-decoration: none;
		}

		/**
		* Pager 
		*/
		.px-thumbs { }
		.px-thumb-box a { text-decoration: none; color: #000000; font-size: 14px; float: left; margin-right: 10px; }
		.px-thumb-box a.current { background: #353535; font-size: 18px; color: #FAFAFA; }

JavaScript

(function($) {

    $.pluginName = function(element, options) {

        var defaults = {
            foo: 'orange',
            currentSlide: 0,
            slideWidth: 400,
            slidesCount: 0,			
			onSlideBefore: function() {},
			onSlideAfter: function() {},
            onFoo: function() {}
        }

        var plugin = this;

        plugin.settings = {}

        var $element = $(element),
             element = element;

        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            
            console.log('init:' + plugin.settings.currentSlide);
            plugin.settings.slidesCount = $element.children().size();
            
            $element.wrapAll('<div class="px-slider-container"></div>'); 
            $element.parent().css({ 'width': plugin.settings.slideWidth  });		//set surrounding div width
			
			$element.parent()												//add controls to surrounding div
				.prepend('<a href="#" class="px-control" id="px-left">prev</a>')
				.append('<a href="#" class="px-control" id="px-right">next</a>')
				.append('<div class="px-thumbs"></div>');
            //$element.css('color', plugin.settings.foo );
            $element.children().each(function(){
				var i = $(this).index();
				
				$('.px-thumbs', $element.parent() ).append('<div class="px-thumb-box" data-id="'+ i +'"><a href="#" data-id="'+i+'">'+i+'</a></div>');
			
			});

			$element.css({'width': plugin.settings.slideWidth * plugin.settings.slidesCount, 'position':'relative' });
		
			$element.children().css({'float': 'left','position': 'relative', 'width': plugin.settings.slideWidth });	
            
            setNavigation(0);
            
            $('.px-control', $element.parent() ).bind('click', function(){
				if( plugin.settings.currentSlide >= 0 && plugin.settings.currentSlide < plugin.settings.slidesCount){
					var newposition = ($(this).attr('id')=='px-right') ? plugin.settings.currentSlide+1 :...