5 Fresh and Useful jQuery Plugins You Should Try

written by aext on November 9, 2009 in Tools with 20 comments

We always look for new jQuery Plugins for using with our projects, because jQuery is easy to work with and there are a lot of plugins built for jQuery. This post contains 5 fresh and useful jQuery plugins that you should try for your next project.

1. jQuery maxImage

jQuery maxImage plugin

This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options.

IE6+ Compatibility: Yes and all modern browsers supported.

Your final <script> tag should look something like this.

<script>
$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true,
  verticalAlign: 'top'
 });
});
</script>

2. jQuery Approach

jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.

IE6+ Compatibility: Yes, but it doesn’t work with CSS style opacity.

Your final <script> tag should look something like this.

<script>
$("a#demo-link").approach({
    "fontSize": "40px",
    "color": "#CC3300"

}, 200);
</script>

3. jQuery Plugin – imgBox

jQuery Plugin - imgBox

imgBox is a jQuery plugin that implements a smooth zoom effect on images.

IE6+ Compatibility: Yes, but it doesn’t work with CSS style opacity.

Your final <script> tag should look something like this.

<script>
$("a.zoom").imgbox({
	'zoomOpacity'	: true,
	'alignment'	: 'center'
});
</script>

4. CSSIE – CSS in your face

CSSIE - CSS in your face

Plugin for jQuery providing native support for missing CSS in IE such as:

* E > F (direct descendant)
* :hover (normally only available to a tags)
* E + F (sibling)
* [rel=attr] (attribute selection)
* :first-child and any other selectors containing : and supported by jQuery
* :focus

IE6+ Compatibility: Off course, and only IE need to apply.

Your final <script> tag should look something like this.

<script>
var test = true;
if(test) {
  $.cssie(true);
  $("link").remove();
} else {
  $.cssie();
}
</script>

5. ColorRating

A PHP/jQuery based 5-star Ajax rating script

A PHP/jQuery based 5-star Ajax rating script. ColorRating requires no database setup or administration as it comes with it’s own SQLite database, making deployment as easy as unzipping the files. ColorRating works with or without javascript, but requires jQuery for Ajax functionality.

Requirement: PDO extension for PHP.

Your final <script> tag should look something like this.

<link rel="stylesheet"type="text/css"href="rating/rating.css"media="screen"/>
<script type="text/javascript"src="http://www.google.com/jsapi"></script>
<script type="text/javascript" >google.load("jquery","1.3.2");</script>
<script type="text/javascript"src="rating/rating.js"></script>
<?php include('rating/rating.php'); ?>

..............

<?php rating_form("unique_table_name"); ?>