joecritch

(function($) {

// The plugin will go here

}(jQuery);

joecritch

api.onSlide(function(where) {
        
        alert('You just did some sliding to the ' + where);
        
    });

joecritch

// Static constructs
$.motionlab = $.motionlab || {};
$.motionlab.simpleScroll = {
	conf: {
		auto_slide: 0,
		hover_pause: 0,
		auto_slide_seconds: 1000
	}
}

joecritch

// Give your class a capitalised camel-cased name. You also need to pass 2 things into it: the actual object that the plugin called, and any  options that the user has chosen.
function SimpleScroll(root, conf) {

    // At this point, "this" is scoped to the SimpleScroll class - let's capture it before it disappears!
    var self = this,
    // I chose an 'alias' for the main object at this point to make it more in context. This is optional.
    cara = root,
    // Add any variables you need to calculate and/or track at this point.
    item_width = cara.find('li').eq(0).outerWidth(true); 

joecritch

// '$.fn' is jQuery's prototype. Practically all plugins work this way. It's just that we're not really doing much directly inside of it.
$.fn.simpleScroll = function(conf) {
    
    // If the plugin was to be matched by several elements, this part of the plugin would only run once. But see how we then loop through "this"...?
    
    // (This merges the default options that we namespaced at the beginning, with any new options being passed in by the user)
	var conf = $.extend({}, $.motionlab.simpleScroll.conf, conf);
    
    // Okay, now we loop through ALL the matched elements.
	return this.each(function() {

joecritch

$.fn.simpleScroll = function(conf) {

    // already constructed --> return API (it shouldn't really be called for a second time.)
    var el = this.data("simpleScroll");
    if (el) { return el; }
	    
	var conf = $.extend({}, $.motionlab.simpleScroll.conf, conf);

	return this.each(function() {

joecritch

$('.carousel ul').each(function() {
   
    var ul = $(this);
    ul.simpleScroll({
        auto_slide: 1,
        hover_pause: 1
    });
    
    // Aha! There's our data object we created inside the plugin. Luckily, this gives us access to everything that SimpleScroll had to offer.
    var api = ul.data('simpleScroll');

joecritch

// add a "fire" variable, below the self variable, that will cover both the current instance and the root variable.

var self = this,
    fire = root.add(self);

/////////////////////////

// then insert calls to the custom functions in all the necessary places, e.g. in the slide function --

$.extend(self, {

joecritch

(function($) {
		
	// Static constructs
	$.motionlab = $.motionlab || {};
	$.motionlab.simpleScroll = {
		conf: {
			auto_slide: 0,
			hover_pause: 0,
			auto_slide_seconds: 1000
		}

joecritch

$('.toggler').change(function() {
	var showIt = !$(this).is(':checked');
	var panel = $(this).closest('.field').nextAll('.hide');
	if(showIt) {
		panel.show().closest('fieldset').addClass('featured');
	}
	else {
		panel.hide().closest('fieldset').removeClass('featured');
	}
});