Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

Resize Image


Resize on Approach and Apple OS X Dock Bar

Submitted by Alex Taylor on May 22, 2010 - 7:12am

This plugin allows a user to change the size of an image based on its distance from the mouse. This can be used to create a nice smooth hover effect, or if used on multiple images at once, it can be used to create a Apple OS X style dock bar. Please see the plugin home page for an example and in depth instructions.

Using the Plugin

to use the plugin use the following code

$('.imgToAffect').resizeOnApproach(settings);

where settings is a map of the following properties

elementDefault (default 35) : the default size to set the element the effect is applied to.
elementClosest (default 55) : the maximum size the element will expand to.
triggerDistance: (default 200) : the distance from the mouse at which the image will start to resize.

Image Editor

Submitted by carloroosen on May 14, 2010 - 8:15am

In-content WYSIWYG Image Editor

This widget lets you scale, drag and crop images in a full WYSIWYG interface. Unlike other image editors this tool lets you drag and scale the image in its container (instead of dragging a crop/resize tool over the original). The container itself can be resized.

The plugin returns the result parameters in many different forms. The plugin can be customized in many ways. This makes the plugin a perfect extension for any WYSIWYG Content Management System.

Currently the plugin is beta. I will publish detailed information soon. In the meantime, please send me feedback.

Use:
$(".myImage").imageEditor();
myImage can be an image or a wrapper around an image. The second has the advantage that you can add more start attributes via css. (width/height, min/max width/height on the wrapper, and width/height top/left on the image.) The start attributes can also be defined in the imageEditor([settings]) function.

CropZoom

Submitted by gastonrobledo on January 20, 2010 - 10:38am

CropZoom is a plugin that let you select an area of an image to crop, also you can zoom in or zoom out, drag and also rotate. this plugins needs ui.droppable, ui.resizable, ui.slider from JQuery UI.