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.

scale


2d Transform

Submitted by heygrady on May 18, 2010 - 2:07pm

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement. It is fully cross-browser compatible. Special care has been taken to make IE support translate() and transform-origin. The properties can also be animated using the jQuery animation library.

$('.example').transform({rotate: 45});
$('.example').animate({rotate: '+=45deg'});

Image Scale Plugin

Submitted by harshalj on April 27, 2010 - 10:51pm

Uses the code from http://ditio.net/2010/01/02/jquery-image-resize-plugin/ to scale images and then injects a div in the DOM to show as a Tool-Tip (top left corner) on the image upon hover - this tooltip contains a link to the original full sized image. See a screenshot of the tooltip here: http://img72.imageshack.us/img72/6397/jqueryimagescale.jpg

Usage example:

$(document).ready(function () {
$("body img").imageScale({ maxWidth: 1000 });
});

jQuery Panel Magic

Submitted by crh3675 on March 31, 2010 - 12:42pm

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

IMPORTANT NOTE: Due to the level of CSS 3 support for the transform property alongside with the browser rendering capabilities, applying a global tiled image to all ".panel" elements is not recommended. Apply tiled images to the <body> tag for best performance.

Updates are applied frequently in the repository.
http://code.google.com/p/jquery-panel-magic/source/browse/#svn/trunk

Please see the demo site source XHTML for how to implement (sorry, no grand documentation just yet).

It is a first release so please be patient while documentation and examples are added/updated.

SuperFun Image Gallery

Submitted by mpelham on December 7, 2009 - 5:36pm

To better explain the poor name for this plugin, I'm not exactly sure what to call this. Consider it an HTML5, CSS3 tech-demo / experiment with scale, rotation and transformation.

It creates a superior Lightbox that allows for AJAX injection, SWF content, iFrame content, and utilizes the new CSS3 transform property to mimick a Flash enviroment, while completely avoiding Flash.

It has been designed to be cross-browser compatible, though it has really only been tested with FF 3.0. I'm currently releasing this Free as in Free-Beer and invite comments and questions.

Fullscreenr - lightweight full screen background plugin

Submitted by nanotux on November 29, 2009 - 9:57am

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image?

It is possible with jQuery and the fullscreenr plugin on this page! You can find a demonstration here and as you can see it works perfectly in all javascript enabled browsers. Note that Internet Explorer needs some extra code to enable the transparent png used for the raster over the background image. If you want to add this code I would like to refer you to unitpngfix, but of course you could just not support IE6.

The code is quite self explanatory, and I’ve included comments where necessary.

jQuery scale

Submitted by robatron on September 17, 2009 - 8:46pm

The jQuery "scale" plugin resizes objects to fit inside their parents while maintaining the aspect ratio. It was written for the TouchScreen projectwhich is being developed at the OSU Open Source Lab.

Please see the project page for more information and a download link.

Thanks for your interest!

~Rob

maxImage Image Scaling

Submitted by akv2 on February 5, 2009 - 1:53pm

This plugin will resize targeted images to their max width according to the browser, their ratio, and some simple specs.

Every time a user resizes the browser, the images will resize with it, while retaining it's ratio. The images can resize based on the width only, the height only, or both. I have also added the option to make your image a background image. The plugin find the width of your browser and the ratio of your image and then resizes it accordingly.