Online image cropping is a widely used feature in web applications.

Prototype JavaScript Image Cropper UI is an unobtrusive script based on Prototype and script.aculo.us.

It allows you to select any area in an image and gives the x, y, x1, y1, width and height values which are enough for a succesful image cropping.

This Prototype image crop UI also has ratio locking, selected area preview and minimum height – width options.

Control.ProgressBar is a percentage based progress bar widget for Prototype.js.

Progress bar can grow:

• on a timed interval
• when events in your application tell it to
• it can be set to poll a given URL.

The mechanism for action is simple, just create a div with relative or absolute positioning, attach the JavaScript, and this control will set the width of the inner element as necessary.

Moo.rd is a Mootools extension that gives useful and powerful functionalities to developers like a lot of effects, customizable standards, utility native functions, table management, virtual boxes and many more.

This lightweight JavaScript library is modular, flexible, and completely compatible with all MooTools plug-ins.

Like MooTools, moo.rd respects strict standards, doesn’t generate any type of warnings and is compatible with all major browsers.

Glossy.js allows you to add shading, shadows and rounding corner effect to images.

This is a very useful method if you want to use the same effect for all images in some part of your website. You won’t need to use an image editing software every time. Your images will stay as the original and you can apply another effect later on. 

How to use Glossy.js?

• Insert the glossy.js in your code
• Add the class "glossy" to your images

Gloosy.js works in all major browsers. If not supported by a browser, it downgrades itself without creating any errors.

jQuery Cycle plugin is a lightweight plugin which lets users to create animated slideshows.

jQuery already has slide plugins and this plugin covers most of the effects and some effects are based on other jQuery plugins.

The Cycle Plugin is split into two parts: the core engine and the transition definitions. The core engine provides the ‘fade’ transition effect and all the logic needed for defining and using custom transitions. The Transition pack includes all of the pre-defined transition effects for the Cycle Plugin.

Slideshow effects includes:

• pause-on-hover
• auto-stop,
• auto-fit
• before/after callbacks
• click triggers
• and many transition effects

Phatfusion has beautiful Mootools JavaScript framework plugins which you’ll love.

Mootools plugins list:

• image menu – horizontal, accordion menu
• validate – form validation
• lightbox – an inline image popup
• multibox – lightbox that supports images, flash, video, mp3s, html
• slideshow – image transition
• sortable table – sort & filter tables
• slider
• rounded corners – rounded corners with divs
• page loader – loads a div from another page into this page.

Acordion image menu:

Sortable table:

Alen Grakalic from CSS Globe has a very nice solution for styling image links.

What is it?

Image Link is an unobtrusive JavaScript code that enables you to apply additional styling to your image links. The mouseover state of the JavaScript displays an image over the original image.

Script, automatically creates a span element that is placed above the image and assigns the css class for it.

Rather than adding css styles to the tables in websites, there is an easy way to style them named: Tablecloth.

Tablecloth is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables.

Tablecloth searches the html source for table elements and process each one. So, there’s absolutely no need for hardcoded class names or id’s.

Features

• Adding even/odd class names to alternative rows.
• Adding over and out class names for mouse over and mouse out states.
• If set to true Tablecloth will highlight rows or columns (or both).
• If set to true Tablecloth adds selected state on click. Based on preferences it then selects rows or columns (or both). Unselect elements by clicking anywhere on the page.
• It leaves room for your upgrade. It has easily editable function that is called when you click on table cell that you can use for your own code..

Adding icons to text links without any programming, not using if elses or functions is possible with Iconize which is only a css file and the related icons.

How does Iconize work?

Iconize, which is a css file, simply looks for the pre-defined texts in the website and shows the icon mentioned in the css file. For ex: Iconize looks for the .pdf text in the website and when finds it, adds the icon after that.

curvyCorners is a javascript based solution for getting rounded corners without images for any html div element.

There are other javascript solutions which offers similar features. Some of these solutions have problems with backgrounds, sharpness of the corners. curvyCorners is between the good ones.

There is also a jQuery plugin created for curvyCorners.

Features

- Free
- Easy to use JavaScript object
- Requires no images or image editing
- Full Anti-Aliasing support
- Anti-Aliasing over graphical backgrounds
- Background-image support (round corners of images)
- Fluid height/width support
- Solid border support, any colour/width with Anti-Aliasing
- User defined per corner radiuses