Many times, you might consider adding more functionality to your applications, such as:

Most of the time these functionalities have already been implemented by other developers in the form of a plugin.

When we discussed effects and animations, we talked about easing which control the value of a CSS property over a certain time.

jQuery has only two easing functions built-in: linear and swing (swing is the default easing function which is used if no other is specified).

If you need more choice for easing functions you can use the easing plugin available at this location: http://plugins.jquery.com/project/Easing

	Note
	This plugin is also included in the jQuery UI project that we are going to discuss later

To start using the easing plugin, download and include the JavaScript file in the HTML page:

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Now, you will have access to more easing options. For instance:

$(document).ready(function() {
    $('.menu-li1').toggle(function() {
        $(this).next('.menu-ul1').slideDown('slow','easeOutBounce'); // 
    },
    function() {
        $(this).next('.menu-ul1').slideUp('slow','easeOutBounce'); // 
    });
});

This will give a bouncy effect when sliding up or sliding down the side menu Note Of course, there are other easing functions available like easeInCirc, easeInOutExpo, easeOutBack, easeOutElastic, easeOutBounce, easeInOutElastic, etc…

Of those plugins, we are going to discuss these two:

There is a well known plugin for slideshows: ThickBox

ColorBox is a serious challenger to ThickBox:

To start using ColorBox:

This archive contains three minified versions of the library:

Include the plugin in your HTML file:

<script type="text/javascript" src="jquery.cycle.all.min.js"></script>

Here is an example of some HTML code:

<div id="photos">​
  <img src="images/bday_cake.png"/>
  <img src="images/corn.png"/>
  <img src="images/egg.png"/>
  <img src="images/pear.png"/>
  <img src="images/thanksgiving.png"/>
</div>

To quickly use the cycle plugin, you could do the following:

$(document).ready(function() {
    $('#photos').cycle({ // 
        fx: 'fade'
    });
});

Of course, there is a list of options we can use to more precisely control the transition effects for the .cycle() method (http://malsup.com/jquery/cycle/options.html)

$('#photos').cycle({
  fx: 'scrollDown', 
  speedIn: 2500, 
  speedOut: 500, 
  timeout: 0, 
  next: '#photos' 
});

This would look like this:

Another popular plugin related to images is the Jcrop plugin which allows the user to crop your images.

	Note
	Of course, the Jcrop plugin does not crop your image, the manipulation will still happen on the server-side. Jcrop just provides the user an intuitive way to define the bounding edges of the image

The downloaded archive contains:

Include the plugin in your HTML file:

<script type="text/javascript" src="jquery.Jcrop.js"></script>

Copy/paste the CSS file along with the animated GIF in your project then include the CSS file in your HTML file

<link rel="stylesheet" type="text/css" href="jquery.Jcrop.css"/>

We will use the following HTML code as an example:

<div id="cropsection">
  <img id="mofat" src="images/lake.jpg" alt="Lake on a sunny day"/> 
  <input type="button" value="crop"/> 
</div>

This is how you apply the plugin to the image in the JavaScript part:

$(window).load(function() {
    var $image_to_crop=$('#cropsection > img').eq(0);
    var jcrop = $.Jcrop($image_to_crop,{ // 
        setSelect: [10,10,100,100], // 
        minSize:[50,50] // 
    });
});

This will render the following:

So far, if we click on the button nothing happens. We want to display the current selection as soon as the user clicks on this button

$('#cropsection :button').click(function() {
    var selection = jcrop.tellSelect();
    alert('selected size: ' + selection.w + 'x' + selection.h);
    alert('selected at coordinates: (' + selection.x + ',' + selection.y + ')');
});

Data like email addresses and urls are generally validated against regular expressions.

The Validation plugin:

Include the library in your HTML:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script> 

Here is an example of an HTML form:

$(document).ready(function() {
    $('#signup form').validate({ // 
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            url: {
                url: true
            },
            password: {
                required: true,
                minlength: 6
            },
            passconf: {
                equalTo: "#password"
            }
        },
        success: function(label) {
            label.text('OK!').css('color','green');
        }
    });
});

Regarding tables, you could imagine the following functionalities:

The DataTable plugin:

Plugin creation follows three main steps:

The jQuery prototype is accessed with $.fn or jQuery.fn:

$.fn.pluginName = function(options) {
  //Implement your plugin here
}

You could use a self-invoking anonymous function like this (recommended design for avoiding conflicts):

(function($){
    $.fn.pluginName = function() {
        //Implement your plugin here
    };
})(jQuery);

Finally to use your plugin you would do

$('selection').pluginName();

As we have seen, there are two structures for creating a plugin.