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.

simple


Easy Gallery for jQuery

Submitted by alaa_badran on October 12, 2010 - 4:02pm

Easy Gallery

An easy jquery image gallery slider. Simple code and simple HTML code.
Simple as:

* including the script to your web page.
* add this code: $("#galleryID").egallery();

Options

Options to be passed to customize it more:
Example: $("#galleryID").egallery({ width:500,
height:230,
easing: 'easeInOut',
speed: 1000
});

width: 400, // Width for gallery holder, li
height: 400, // Height for each element
speed: 600, // Animation speed in MS
delay: 3000, // delay for auto play to transact.
easing: 'swing', // Easing animation. require to include easing plugin
thumbs: 'none', // Thumbs: none, numbers, image OR custom
thumbClass: '', // Thumb CSS class
thumbImage: '', // Image url for thumbs.
aClass: '', // Thumb active class
auto: true // True to enable auto play

NavDock Menu Plugin

Submitted by Denis Pissoort on September 10, 2010 - 6:48am

NavDock is a simple dock style menu icon.

homepage and demo here :
http://dipi-graphics.com/labs/6/NavDock-jQuery-Plugin.html

cheers

jQuery Sparkle - jQuery's DRY Plugin/Effect Framework

Submitted by balupton on July 12, 2010 - 5:33am

jQuery Sparkle is a simple but powerful DRY Plugin/Effect Framework aimed to simplify your jQuery development such that you no longer have to repeat yourself.

http://www.balupton.com/projects/jquery-sparkle

It already includes such extensions as:
- An EventCalendar built upon the jQuery UI DatePicker. (It also supports AJAX for loading events).
- jQuery Plugins for the Bespin and TinyMCE WYSIWYG editors.
- A SingleClick Event to easily capture a single click. Unlike the builtin click which fires for each and every click.
- String.prototype.queryStringToJSON to easily convert a QueryString into a JSON Object. Eg. "file.js?a=1" to {a:1}

Farkow Easy Accordion

Submitted by farkow on June 18, 2010 - 11:22am

Farkow Easy Accordion is a very simple and basic accordion script.

If you need an accordion style UI without extended features, this script is easy to integrate with your own project.

MicroTabs (1000 Bytes)

Submitted by DanielProbst on June 16, 2010 - 7:32am

Hey, there's been another Micro release. This time it's MicroTabs. If you want a small (1 Kb) and easy to use tab plugin with no (in my view) lame animations. Check it out.

JSON to XML

Submitted by TriLLi on June 9, 2010 - 4:47am

This plugin converts provided json to XML.
It create XML Object, converts created string to XML and returns object with two values :

  1. xml (xml object)
  2. string (string of xml)
$(function(){
            var _x = $(document).jtx({one: 'senad', two: 'meskin', nodes: ['one', 'two', 'three']});
            $('#txt').text((_x.string));
        });

jQuery.upload

Submitted by lagos on May 30, 2010 - 2:22am

jQuery upload is jQuery plug-in to upload files by the Ajax style. It is possible to upload files simply and easily in the same way as jQuery.post and the jQuery.get.

Usage, simply call upload method from the jQuery object, that containing input element (type attribute is "file"). URL at the uploading destination, the callback method when completing it, and the data type of response are specified by the argument. To execute uploading simultaneously with file selection, use change events of the input element.

$('input[type=file]').change(function() {
    $(this).upload('/action/to/upload', function(res) {
        alert('File uploaded');
    }, 'json');
});

jQuery Tag Cloud Plugin

Submitted by rohitsinghsengar on May 27, 2010 - 9:21am

This plugin will create a animated tag cloud out of the list of tags for your blog/site. It is based upon the jQuery framework. Although there are many tag cloud available in jQuery Plugin arsenal, I really felt the need to create this one. The plugin include font animation as well as tag animation in three ways (horizontal, vertical and random). The animation will stop when user mouse over on the tag cloud, restarts after sometime after mouse out. Very easy to implement and customize. You just need to write a simple line apply it on the <div> or <ul> containing list of tags.

See online demo | Download Tag Cloud Plugin

Frame Animation Plugin for jQuery

Submitted by bmartinec on May 24, 2010 - 7:42am

I wrote this plugin since it is a very simple and effective way to have nice and complex animations (with mouseover triggering) on your site without the use of Flash or Silverlight or anything similar. I got inspired for the plugin from the header logo at www.southparkstudios.com.

It's very simple to use provided that you have an image of several images (frames) vertically joined together (like a filmstrip).

Then you simply call $('#myElement').frameAnimation({delay:30});
and by default you get hover (mouseover/mouseout) functionality that triggers animation on mouseoever in one direction and on mouseout in the other. Delay parameter sets the timeout between frames, essentially changing framerate. By default it is set to 50 (ms), but you will probably have to set your own, because it really depends on the total number of frames that you have, length of animation and more importantly what looks good to you.

Mousey Dialog

Submitted by mdbiscan on May 17, 2010 - 4:45pm

mouseyDialog

mouseyDialog attempts to solve the dialog issue while keeping things simple. It's just a dialog positioned by the mouse. Clicking the close button or outside the dialog will close it (if you're using the click event). mouseyDialog knows where the edge of the window is and will reposition itself if it's outside of it.

HTML required to use mouseyDialog:

  1. 1. An anchor with an href reference to an ID
  2. 2. A corresponding ID on an element (let's you determine the structure - use div, ul, p, whatever!)

HTML Example

<a href="#example">Hello</a>
<div id="example">How are ya?</div>

Calling the Plugin

$('a').mouseyDialog();

Associated Selectors

  • dialog div: mouseyDialog
  • close div: mouseyDialog_close

Options

zIndex

Sets the z-index of the dialog