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.

box


Solid Shadows for Inline and Block Level Elements

Submitted by justinsane98 on October 5, 2010 - 12:29pm

This is not a generic dropshadow plugin. This plugin creates solid shadows. There is no fading or blurring. It creates a solid shadow in any direction of any length on block and inline elements.

EXAMPLE:

$('span').solidShadow('inline','#fff','black','left',5);

This will set the text color to white and give a 5px black text shadow to the bottom left of the element.

qBox plugin : sliding boxes

Submitted by zazabe on October 1, 2010 - 3:38am

description

Used to display some boxes in an area, others will come from outside with a sliding effects.
Full customizable, this plugin can be used in many situation. (photo gallery, articles random list, ...).

Currently tested on Firefox 3.6, IE8 and Opera.
There's a bug on Chrome, seem to come from outerWidth(true) jQuery method who return a wrong value.

Git repository

git clone git://github.com/zazabe/qbox.git

Instantiation

Some CSS is required, defining box area and boxes size.

javascript:

$('#area').qbox();

CSS:

#area {
  width: 450px;
  height: 450px;
  position: relative;
  overflow: hidden;
}
#area .box {
  width: 150px;
  height: 150px;
}

Methods

// animation action

$('#box').qbox().pause(); //pause animation

leobox plugin 1.0

Submitted by lmajowka on July 18, 2010 - 2:21pm

Easy and simple div box absoluted centered on the screen with transparent gray background
cross-browser compatibility even for IE6

simple use:

$('selector').openBox();
$('selector').closeBox();

Flying / Floating boxes with easing and motion blur

Submitted by morcmarc on July 12, 2010 - 8:18am

The plugin itself is very lightweight, only a few rows of code. There are two major “functions” which make everything alive: the initialization part sets the timer of the JavaScript engine to a specified frame rate; you can change this value by passing the frameRate variable to the plugin at instantiation. In the next step the plugin binds the mouse movement event to the parent object. The naming may be a little misleading, but it’s trying to say to which object the floating box should be bound to. There is another variable I would like to clarify: the stage. Usually the parent and the stage are the same. But if you want your box float in a different “co-ordinate system” other than the parent’s you have the possibility to do so, just provide a new stage. Back to the mouse event. When the event occurs, the code checks the position of the mouse within the parent object (so NOT the absolute coordinates).

Link Menu

Submitted by keaglez on May 21, 2010 - 3:35pm

This jQuery plugin create a menu box for your link. This will useful when you want to have some action on your link.

ImageBox

Submitted by byGui on April 21, 2010 - 4:28am

A simply script to show an image when the users clicks on it.

How it works

imageBox add to divs with the zoom icon and another for the rollover with another icon. When the users clicks de image the image passes over the “rel” attribute is loaded in a overlay div.

The icons are located by the script in the same directory of the script.

Example

<img src="image01thumb.jpg" rel="image01.jpg"/>
<img src="image02thumb.jpg" rel="image02.jpg"/>

<script type="text/javascript">
$(document).ready(function()
{
$("img").imageBox();
});
</script>

No extra options in this version.

Style Corners

Submitted by reneberwanger on March 13, 2010 - 2:05pm

Style your Boxes!!!!

/**
* @autor Rene Berwanger
*
* @description Creates corners and calculate your positions, to make a easy and beauty style for pages
*
* @param position: Defines the position of each corner, realtive to borders of element;
* @param topLeft: Defines the class of topLeft corner;
* @param topRight: Defines the class of topRight corner;
* @param bottomRight: Defines the class of bottomRight corner;
* @param bottomLeft: Defines the class of topRight bottomLeft;
* @param top: Defines the class of topRight top;
* @param right: Defines the class of right corner;
* @param bottom: Defines the class of bottom corner;
* @param left: Defines the class of left corner;
* @param zIndex: Defines the z-index of element;
*/

Arrows and boxes

Submitted by headjump on March 6, 2010 - 3:47pm

Easy to use but powerful plugin to draw nice boxes and arrows to your website from simple markup like

(User) > (Admin)

Try it: Demo, doc and download

Get a live preview for your markup: Preview editor

jQuery Msg Alert

Submitted by carvalhar on March 2, 2010 - 10:33pm

Create easily alert messages to all your users, because the usage is very simple.
This plugin uses jQuery UI Dialog, so you have all Dialog methods and properties and also these new properties about where and when the alert should appear.

Flash messenger

Submitted by spurs on February 24, 2010 - 4:11pm

Flash Messenger

Best way to inform users after they submit a form

Plugin features
  • flashes the box on the screen containing specific message
  • automaticaly closes the box or waits for user to close it (set by parameters)
  • all main features can be parametrized (position, style of the box, delays, etc.)