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


1 year 21 weeks ago

A good way to have extra content or a navigation tool in your page!

This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.

demo page:
http://pupunzi.com/#mb.components/mb.extruder/extruder.html

download page:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Dependencies:

  • jquery.hoverIntent.js
  • jquery.metaData.js
  • jquery.mb.flipText.js (soon available as stand alone)
< < < < < < <
2 weeks 6 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)

< < < < < < < < < < <
1 year 22 weeks ago

Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.

Features

  • Very light-weight plugin, fast and simple.
  • Can collapse any element within an document.
  • Can add seperate classes for expanding and collapsing.
  • Customized targeting elements.
  • Callback functions.
  • Predetection of collapsed elements.
  • Can create accordion, list collapsers etc by adding a single additional line.
  • Cross browser supported.
< < < < < < <
3 years 46 weeks ago

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

< < <
1 year 28 weeks ago

Display on a certain number of characters of text, and trigger the display of the full text with an automatically appended "Read More" link.

Customizable: number of characters, ... ellipses text, and "read more" link

< <
1 year 18 weeks ago

WiseJS - a wise tool for web developers

The components of WiseJS allow to embed any javascripts components in ASP.NET, including jQuery Plugins, jQuery UI, and more, includes powerful assistants to access different database, creation of events/actions on the server side and/or client side. Allows the simultaneous use of C # or VB and javascript.
Note: When viewing the full demo for the first time, be patient because the demo needs to load a set of full libraries; jQuery, jQuery UI, ExtJS, Dojo, DHTMLX ...

WiseJS´s components have two main goals:

A - The first scenario envisages the use of any component javascript. Allows it to be integrated into ASP.NET, using components from WiseJS specially created for this purpose.
These components contain a powerful assitant, which facilitates the integration, such as easy access to various databases, creation of events/actions to be processed on the server side, ...

< < < < < < < < <
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
< < < < < < < < < <
1 year 39 weeks ago

Interesting effects, which can be used on site-header. For more information visit 4coder.info

Example:

<ul id="mindscape">
    <li><img src=".../mindscape1.png" /></li>
    <li><img src=".../mindscape2.png" /></li>
</ul>

$(function() {
    $('#mindscape').smart3d(850);
});

#mindscape {
    width: 750px;
    height: 174px;
}

Compatibility:

IE 6, 7, 8, 9
FireFox 2.2, 3.6
Safari 3.2.1, 4.0.5
Opera 9.52, 10.01, 10.10
Chrome 5.0

You can download this plugin only on 4coder.info

< < <
1 year 39 weeks ago

When I noticed the growing popularity of JS-Slide and JS-Fade effects I have decide to develop a plugin for jQuery. This plugin will help you to add thise effects to the site in more simple way.

Example:

<script type="text/javascript">
jQuery(function() {
      jQuery('.slide1').ulslide({
            width: 443,
            height: 'auto',
            bnext: '#e1_next',
            bprev: '#e1_prev',
            axis: 'x',
            autoslide: 2000
      });
});
</script>

<ul class="slide1">
      <li> <img src="images/image-1.jpg" alt="" /></li>
      <li> <img src="images/image-2.jpg" alt="" /></li>
      <li> <img src="images/image-3.jpg" alt="" /></li>
</ul>
<a id="e1_prev" href="#">Previous</a>
<a id="e1_next" href="#">Next</a>

Compatibility:

IE 6, 7, 8, 9
FireFox 2.2, 3.6
Safari 3.2.1, 4.0.5
Opera 9.52, 10.01, 10.10
Chrome 5.0

< < <
2 years 32 weeks ago

This jQuery class will read RSS feeds on a website through the use of AJAX and feed the data into a template as defined by the developer. Simple create a template object and define the "item" level of the RSS feed once within the object using variables for the different feed items. This plugin will then read the feed and duplicate the template object however many times specified- creating a simple feed reader. VERY easy to implement. http://www.ooeygui.net

< < < <
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

< < < < < <
1 year 22 weeks ago

A full featured image gallery, with nav toolbar, thumbnails, autosize frame.

DEPENDENCIES:
none

HOW DOES IT WORK:

here is the js call:

$(function(){
$('#g1').mbGallery({
         maskBgnd:'#ccc',
         overlayOpacity:.9,
         startFrom: 5
      })
});

here is the code for each image:

<div  id="g1" class="galleryCont">
    <a class="imgThumb" href="gallery1/LR/01.jpg"></a>
    <a class="imgFull" href="gallery1/HR/01.jpg"></a>
    <div class="imgDesc">Description 01</div>
</div>

Params

* containment:“body”, (string) the containment element of the galery
* cssURL:“css/”, (string) the path to css
* skin:“white”, (string) the name of the css file to invoke
* overlayBackground:“#333”, (string) the exhadecimal value of the overlay color
* overlayOpacity:.5 (int) the opacity value of the overlay

< < < < <
2 years 18 weeks ago

Slide your images into a mask!

Build your own png mask and choose your images to slide inside!

Releases:

1.0 first release

dependencies:

jquery.js (1.2 -> 1.3.1)

How does it work:

here is the js call:

$(function(){
$("#g1").mbMaskGallery({
type:"normal",
galleryMask:"mask/monitor.png",
galleryColor:"black",
galleryLoader:"loader/loader_black.gif",
loaderOpacity:.3,
loader:false,
fadeTime: 200,
slideTimer: 6000
});
})

here is the code for each container:

<div id="g1" class="galleryCont" >
<img src="images/3.jpg">
<img src="images/2.jpg" url="mbMaskedGallery1.html">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<mg src="images/8.jpg">
</div>

Params:

type axcept random or normal;

< < < <
2 years 16 weeks ago

Need to show many elements in constricted space?

1, 2, 3, 15...slide how many box you want with a simple and configurable navigation toolbar.

here is the js call:

$("#myScroll").mbScrollable({
   width:700,
   elementsInPage:1,
   elementMargin:2,
   shadow:"#999 2px 2px 2px",
   height:"auto",
   controls:"#controls",
   slideTimer:600,
   autoscroll:true,
   scrollTimer:4000
});

here is the code for the dom elements:

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

< < < <
2 years 18 weeks ago

organize your tabs!

A usefull component that let you build a tabbed interface really easily; ad you can sort your tab as you want!

DEPENDENCIES:

ui.core.js
ui.sortable.js

optional:
jquery.metadata.js

HOW DOES IT WORK:

here is the js call:

$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});

here is the code for each tabset:

<div class="tabset" id="tabset1">
<a id="a" class="tab {container:'cont_1'}">tab 1</a>
<a id="b" class="tab {container:'cont_2'}"  >tab 2 con testo lungo</a>
<a id="c" class="tab disabled {container:'cont_3'}">tab 3</a>
<a id="d" class="tab {container:'cont_4'}" >tab 4</a>
</div>

here is the code for each tabContent:

container 1

container 2

< < < <
2 years 6 weeks ago

jQuery DropDown Menu Style 3

jQuery DropDown Menu Features

  • Cross-browser compatibility
  • Works in browsers with disabled Javascript.
  • Search engines freandly
  • Unordered list (LI and UL HTML tags) structure for menu items
  • Easy to setup and update
  • Awesome animation and transition effects
  • Six pre-desinded color schemes
  • 100% CSS-driven designs.
  • Powered by jQuery
  • Lightweight - 7kb uncompressed
  • Unlimited sub-levels

Color Themes:
(Olive Drab) jQuery DropDown Menu
(Deep Sky Blue) jQuery DropDown Menu

< < < < <
1 year 42 weeks ago

This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.

To view a better description of the carousel, including all options and examples, visit my website (bkosborne.com).

Tested and works with jQuery version 1.4.2

< < < < < <
1 year 42 weeks ago

This carousel will take a list of any number of images and rotate them out in either a vertical or horizontal fashion, cascading in with a nice simulated 3D effect. Currently only works with images that are the same dimensions. Many options to customize how it operates and looks. View my website for demonstrations and more.

Tested and works with jQuery version 1.4.2

< < < < < < < <
3 years 4 weeks ago

This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lies.

Parts of the background which lie in the corners of the grid will not be scaled and parts in the sides of the grid will only be scaled in one direction. 9-Grid scaling can be applied to an element through one line of code:

$('#elementid').scale9Grid({top:10,bottom:10,left:10,right:10});

Where the top, bottom, left, and right values define the scaling grid.

Reasons to Use 9-Grid Scaling

  • No more slicing up images into multiple files
  • No more tedious styling and structural markup for the same effect
  • Achieve rounded corners
  • Achieve drop shadows
  • Complex fluid backgrounds
<
3 years 18 weeks ago

An absolutizer for block level DOM elements.
It don't modify the DOM document
Require dimensions.

< <
2 years 52 weeks ago

This plugin automatically adds a column with row count. Thus making your tables more readable and keeping your markup/metadata clean.

The use:

$('.myTables').rowCount();

With options:

$('.myTables').rowCount( { name: "Count", cssClass: "columnCss" } );
< < < < <
2 years 27 weeks ago

A simple script to add simple wordpress style captions to images using existing attributes on the image (longdesc, title, alt, or any other attribute you specify).

Takes on the existing float attribute from the image (if set).

Tested in conjunction with TinyMCE's image placement and seems to work well.

Should be very customisable, but is very simple!

You are free to distribute, modify and re-release this code.

< < <
1 year 29 weeks ago

New version 1.3 07-24-2010!
Advanced List Rotator 1.3 just released, check the updated home page!

The purpose of Advanced List Rotator is to show each list item for a period of time, then jump to the next using pretty effects. It also utilize a helper list which can act as thumbnails for a gallery or tabs for a banner rotation. By hovering items in the helper list the main list will automatically show the connected item and pause the rotation. Once the user removes the mouse from the item the rotation will continue from that point. But, it can do so much more…

Advanced List Rotator is highly customizable. You can customize effects, timers, class names, start points, randomness, shuffle, user interaction triggers and wether or not the rotation engine should be enabled. This all allows for many fun variants of the plugin. Check out the example page to see some of the possibilities.

< < < < < <
2 years 41 weeks ago

AjaxScroll is an lightweight jQuery plugins . Provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as MSN Image Search(Live.com Search).

< < < < <
2 years 33 weeks ago

Align With is a simple plugin to re-position one or more HTML elements to be aligned with another element.

Elements can be aligned by corners, edges and centre-points - ideal for dynamic content such as menus and tooltips.

<
2 years 11 weeks ago

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

< < < < < < < < < < < < < < < < < < < < <
3 years 37 weeks ago

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. Three distinguishing features of this script are:

  1. Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
  2. Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
  3. Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
  4. Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.
< < <
1 year 42 weeks ago

The Animated Grid Plugin is a simple bi-dimensional Grid.

This plugin was created to be the more flexible as possible to fit into your Html Structure easily without adding extra class. It allow you to manage easily the degradation if javascript is disable with two differents fields in the Css file.

Dependencies

  • jQuery 1.4.2

I don't test with previous version.

Browser Compatibility

  • Mozilla Firefox / Safari / Chrome / IE7+

I don't test with IE6.

see this page for more information :
http://dipi-graphics.com/labs/5/Jquery-Animated-Grid-Plugin.html

This Plugin is licenced under the Common Creative Licence.
licence page : http://creativecommons.org/licenses/by-sa/2.0/be/

There is a Google Group for Feedback, Features requests, Bug report and Support:
http://groups.google.com/group/jquery-animated-grid-plugin

Cheers

<
1 year 48 weeks ago

Multilevel jQuery Menu with fade and smooth drop-down animation on submenu appearance.

Check live demo: Animated jQuery Menu (White Smoke)

< < < < < < < <