Plugins

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.

Plugins


2 weeks 5 days ago

AJAX-ZOOM player is a powerful single image zoom & pan viewer with optional gallery extension. It features over 300 other options and can be easily integrated into any website, eCommerce solution or CMS.

AJAX-ZOOM uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).

In a special 360° rotation mode it can also be used as object spinner.

Links
Examples
Magento (demo store)
xt:Commerce (xtcModified demo store)
VR Objects 360° (3D Spin & Zoom)
Oxid (demo store)

< < < < < < < < < < <
2 years 4 weeks ago

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

Visual jQuery LightBox Features

  • Slideshow with autostart option
  • Thumbnail and code generator for Windows & MAC
  • XHTML compliant
  • Zoom effect with overlay shadow
  • Rounded corners of overlay window
  • Large images fit to browser window
  • Overlay floating - image floats on scroll staying always visiable
  • Smooth cross-fade transition & animation
  • Image preloading after the page is loaded
  • Keyboard navigation
  • Graceful degradation when javascript is not available
  • A lot of nice gallery themes
< < < < < < < < < <
3 years 3 weeks ago

This is a useful plug in to build full featured and full skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js

How does it work:

here is the js call:

$(function(){
$(".container").buildContainers();
});

here is the code for each container:

<div class="container stikynote draggable resizable" style="width:400px; top:270px;left:170px" buttons="i,m,c">
<table cellpadding="0" cellspacing="0" class="containerTable">
<tr class="top">
<td class="no"> </td>
<td class="n"><a href="">Stiky note</a></td>
<td class="ne">&nbsp;</td>
</tr>
<tr class="middle">
<td class="o"> </td>
<td class="c" >
[your content goes here...]
</td>
<td class="e"> </td>
</tr>
<tr class="bottom">
<td class="so"> </td>
<td class="s"></td>
<td class="se"> </td>
</tr>
</table>
</div>
< < <
1 year 22 weeks ago

Here it is!
Finally I realized the DIV box model of the (mb)Containers!

This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

demo and doc: http://pupunzi.wordpress.com/mb-jquery-components/mb-containerplus/

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js
optional: jQuery.metadata.js

How does it work:

here is the js call:

$(function(){
$(”.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”
});
});

here is the code for each container:

Titolo container 1

< < < < < <
2 years 17 weeks ago

A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!

dependencies:

jquery.js(1.3)
ui.core.js (1.6rc5)
ui.draggable.js(1.6rc5)

How does it work:

here is the js call:

$(function(){
   $("#navArea").imageNavigator( {
          areaWidth: 700,
          areaHeight:500,
          draggerStyle:"1px dotted red",
          navOpacity:.8
    })
})

here is the code for each image:

<div id="navArea">
<div imageUrl="DSC00844.JPG" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">zuccheriera</span>
<div class="description"><STRONG>description1</STRONG></div>
</div>
[...]
</div>

Params:

areaWidth and areaHeight are the width and the height of the display;

< < < < <
2 years 20 weeks ago

The ternElapse plugin allows you to cover any HTML element with a transparent mask and place a loading image and text at the center of the mask. With this plugin you can open and close the mask, change the text and/or image inside the mask or include no text or image to begin with. Cover the document body or cover any other block level HTML element.

<
2 years 42 weeks ago

Provides a visual grid overlay for the 960.gs grid framework. The grid can be toggled on and off, and is configurable (e.g. opacity). Works for both 12 column and 16 column grids.

<
3 years 35 weeks ago

Dynamically add a new option to a select list. A customised form (which you specific) is ajax submitted. A successful ajax return adds the new item to the select list.

< < < <
1 year 35 weeks ago

AeroWindow generates very cool Boxes in the Aero Style, inspired by the style of Window7.The popup window offers the usual options and full functionality similar to Windows windows.

Features

  • Special feature: Live animated Aero Glossy look (see header when moving)
  • Usual window buttons: Minimize, Zoom, Maximize and Close
  • Double-click support, such as in windows (maximize, zoom out)
  • Active window is highlighted visually, as in Windows
  • User-infinitely scalable window size
  • Sliding window by mouse dragging
  • Usual Z-order management, as in Windows
  • + Animated changing the window size
  • + Multiple configuration options

Demo and Download - Go to the Project Page:

http://www.soyos.net/aerowindow-jquery.html

<
3 years 43 weeks ago

akModal is the simplest way to achieve the modal dialog box or pop up box for simple purposes like showing signin box etc.

You will find it very useful when you need a lightbox kind of plugin that you can control, and customize for you requirements.

More information is at akModal article

< < <
2 years 3 weeks ago

altAlert, a jQuery plug-in for personalized alert messages without the need to change existing code.

More info at http://roosteronacid.com/blog/index.php/2010/01/20/jquery-plug-in-person...

<
2 years 11 weeks ago

Hi Dear,
Mohammad Ebrahim Amini Faravaghi
Thank You For Visit.
--Best Regards

< < < < < < < < < < < < < < < < < < < < <
3 years 14 weeks ago

Make an existing element into a floating element according to the attach option, if no value is given, the element will stay floating in the middle of the browser window.

$('#myfloat').aqFloater({attach: 'nw', duration: 100, opacity: .5});
<
3 years 14 weeks ago

Creates a styled floating layer that can be customized. There are two ways to create a aqLayer object, static and dynamic contents.

$('div').aqLayer({ attach: 'ne', closeBtn: true })
     .click(function(){ $(this).aqLayer('show') });
<
3 years 14 weeks ago

aqTip attaches a hover event to elements. When mouse over the element, it displays the tip box.

$('#example1').aqTip('Tip me');
<
2 years 21 weeks ago

An easy to use, cross-browser compliant and lightweight tooltip plugin. It's also easy to customize with CSS.

As simple as:

$('a').aToolTip();
<a href="#" title="Hello, I am aToolTip">Link</a>

Actual tooltip looks like this:

<div class="aToolTip"> 
     <p class="aToolTipContent">Your tooltip content</p> 
</div>
< < <
2 years 38 weeks ago

Awesome Tip is a tooltip framework for jQuery that gives you the flexibility to attach a tool tip to any element in your markup and easily style it any way you want. By default, it will act on the mouseover and mouseout events for non-form inputs and focus and blur for form inputs.

This plugin requires the trigger elements to exist in the DOM before being attached, so if you reload html containing triggers, the awesome tip will need to be reapplied.

Example:

<style type="text/css">
    div.awesometip-container {
        border: 1px solid black;
        background-color: white;
        padding: 5px;
    }
</style>

$("div.triggers").awesometip({
    content: "Some text for my tooltip!",
    alignment: "left",
    spacing: 10
});

Options:

< < < < <
3 years 8 weeks ago

If you've ever found yourself wishing you could add multiple/layered backgrounds to a div tag, you found that multiple backgrounds for div tags were not supported. The solution is to use the Background Layers plugin. The concept is similar to the use of layers in Photoshop, one background image on top of another.

< < < <
2 years 14 weeks ago

This plugin adds a opacity background to any object that has width/height specified without giving the inner elements an opacity. This plugin doesn't use any CSS hacks or the PNG hack. It uses the native jQuery opacity function, DOM strict attribute names and jQuery's CSS setters/getters to allow cross browser compatibility. Technically it adds a div element automatically within the parent and sets itself as background.

Simply:

$('.backopacity').backOpacity();

With settings:

$('.backopacity').backOpacity({
background: '#ffffff',
opacity: '0.1'
});

Currently does not work for IE6! Works on IE7+, Opera 9+, Firefox 3+ as i tested.

< < < < < <
1 year 44 weeks ago

bgFlow is a jQuery plugin that displays a background image moving with your cursor’s position. Image is loading dynamically and some options let you customize the movement.

Important note : Since this plugin sets the body of the document to “overflow: hidden” to disable scrollbars, it is NOT made for scrollable webpages.

< < <
1 year 41 weeks ago

Simple "Please Wait" functionality. blockUI provides a mechanism for blocking user interaction with a page (or parts of a page). This can be an effective way to simulate synchronous behavior during ajax operations without locking the browser. It will prevent user operations for the current page while it is active and will return the page to normal when it is deactivated.

The most current version of BlockUI is always available at:
http://jquery.malsup.com/block/#download

Please post questions to the jQuery Forum:
http://forum.jquery.com

You can also follow the development on github:
http://github.com/malsup/blockui/tree/master

<
1 year 37 weeks ago

BlogSlideShow is a JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

All what you need is to provide links on your images, you want to show. Likely you already have images on blog pages linked. Just add rel attribute containing "blogslideshow" to them.

When you click on such a link, you'll get the image viewer on the overlay. When hovering the overlay you get toolbar appeared by which you can navigate images. Besides, you can use keyboard arrows <-, ->, Esc as well.

< < <
3 years 26 weeks ago

boxy is a Facebook-style general purpose dialog box with support for multiple visible instances,
drag'n'drop, size tweening, AJAX loading and automatic generation of
confirmation/question boxes. Designed with "applications" in mind, so there's
a pretty decent API for manipulating instances.

Please direct all feedback/bug-reports to our Google Group at http://groups.google.com/group/boxy-plugin and NOT the issue tracker here.

< <
1 year 30 weeks ago

bPopup is a lightweight jQuery popup plugin (2,73kb minified). It doesn't create/style your popup/dialog window but provides you with all the logic (open/close, modal overlay, events etc). It gives you a lot of opportunities to customize so it will fit your needs.
You can open anything you like with bPopup, e.g. movies, forms, ajax-requests etc.

It has been tested in Internet Explorer 6-8, Firefox 2-3.6, Opera 9-10, Safari 4-5 and Chrome 4-5 on a PC.

Demo

http://dinbror.dk/bpopup/

<
2 years 10 weeks ago

Captify adds semi-transparent captions that appear on top of images when the user's mouse rolls over them. It offers a simple way to add captions to images in a manner that doesn't add clutter to a design. Tested in IE, Firefox, Safari, and Chrome.

< < <
2 years 7 weeks ago

CeeBox creates a lightbox-like popup overlay for images, image, html via ajax and iframe (both modal and non-modal), and flash movies. Videos will be displayed in a popup simply by adding "ceebox" to a link a YouTube movie page. CeeBox supports auto-embeded popups for Google Video, YouTube, Metacafe, Vimeo, Dailymotion, iFilm, and Facebook videos.

It also creates gallery next/prev buttons for any type of content images/videos/html if ceebox is applied on a parent element with links underneath.

Best of all the minimized version of jquery.ceebox.js is only 13KB! This is smaller than many of the lightbox-like scripts out there.

If CeeBox is so small, why is the release download zip so big?

I've included the source psd files for the buttons so that people can alter them if they want. Nice of me huh?

CeeBox Requirements

< < <
1 year 19 weeks ago

Designed by Christopher Hill, and inspired by Lokesh Dhakar's Lightbox2, ChillBox is a JQuery Plugin is a simple, unobtrusive script used to overlay images on top of the current page. It can be used for link anchor attributes. ChillBox has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.

<
1 year 18 weeks ago

Designed by Christopher Hill, ChillTip is a JQuery Plugin that allows you to have a custom designed tooltip for your website. It can be used for span, img, anchor attributes and pretty much anything else that uses the title attribute. ChillTip has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.

<
1 year 18 weeks ago

Designed by Christopher Hill, ChillTip is a JQuery Plugin that allows you to have a custom designed tooltip for your website. It can be used for span, img, anchor attributes and pretty much anything else that uses the title attribute. ChillTip has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.

<
2 years 9 weeks ago

CJ Object Scaler will scale an object to either fit or fill within the boundaries of a destination object. I based this plug-in off another JavaScript project I made awhile back, called CJ Image v1.0 (non jQuery). It was a nice little function that would help you calculate the size and offsets to use when scaling an image to fit (or fill) within another element. It didn't actually do any scaling, per say, it merely provided you with the numeric amounts to use. The function introduced two scaling methods, Scale To Fit and Scale To Fill.

  • Scale To Fill - We scale the source image to fill the destination box. This might cause a portion of the source image to be cropped or offset from the destination box.
  • Scale To Fit - We scale the entire source image to fit into the destination box. This might cause a gap on some of the sides, because the source image might not be proportional to my destination box.
< < < < < <