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.

transition


jQuery transitions

Submitted by stephband on October 3, 2010 - 10:14pm

Feature detects CSS transitions and provides a means to manage transitions that start or end with unanimatable properties solely using class definitions in CSS. Adds two methods to jQuery:

.addTransitionClass( className )
.removeTransitionClass( className )

These fall back to jQuery's standard .addClass() and .removeClass() when the browser does not support CSS transitions, so they are safe to use without forking your code.

Blockster transition effect

Submitted by mitya33 on June 30, 2010 - 8:16am

Blockster is a Javascript transition effect designed for 'featured content' rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.

For demos and full info, see http://mitya.co.uk/scripts/Blockster-transition-effect-122

It requires that you have a holder DIV to house your slides, also DIVs. All should be given fixed widths (even the slides - don't give these width & height 100%).

The rotation is started by calling

blockster(params)

...where params is an object of property/value pairings from the following:

Shadow animation

Submitted by edwinm on June 20, 2010 - 5:08pm

With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius.

Example:
$('#box1').animate({shadow: '0 0 30px #44f'});

The plugin works in the current versions for Firefox, Safari and Chrome. It is expected to work in Internet Explorer 9 when it is released.

Due to a bug in Opera, it doesn't work in this browser.

Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. The plugin supports only one shadow.

Color animation

Submitted by edwinm on June 20, 2010 - 5:04pm

What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties:

* color
* backgroundColor
* borderColor
* borderBottomColor
* borderLeftColor
* borderRightColor
* borderTopColor
* outlineColor

This plugin is based on Color Animations by John Resig. Unfortunately, it has a major bug which makes it unreliable. It also doesn't support the borderColor-property.

jQuery Star Wipe: Why eat hamburger when you can have steak?

Submitted by Ben Alman on March 7, 2010 - 9:43pm

With jQuery Star Wipe you can enable the single best transition ever created, the star wipe, in any recent WebKit browser!

Full documentation, source, and examples are available on benalman.com.

jBanner

Submitted by MorganShowman on March 30, 2009 - 3:20pm

This week I launched my new plugin jBanner, a jQuery plugin for displaying a rotating banner from an unordered list of images. You can check out a demo here: jBanner Demo. jBanner builds a rotating banner ad in slideshow format complete with linking, and timer abilities (play/pause, and pagination to come soon). The banner is built from an unordered list in this HTML structure:

<ul><li><a><img/></a></li></ul>

Options supported include: height, and width of images, borders, amount of padding around images, amount of margin around images, caption on or off, caption height, timer delay, and transition speed.

You can find more information at jBanner or jBanner GitHub Repo

SimpleSlider

Submitted by jstnjns on March 17, 2009 - 3:28pm

A nifty little plugin that allows you to have multiple frames that slide, fade or cut between each other. It is very similar to the Coda-Slider plugin in how it works, but this is a very scaled down version that I feel is more intuitive to front end developers, and extremely versatile.

Features

  • Generates intuitive next and back buttons that disable on first and last frames, respectively, or loop all the way through
  • Built-in auto-scroll feature, also includes time setting
  • Supports horizontal as well as vertical scrolling
  • Degrades gracefully if JS is not enabled, due to the fact that nearly all structure is derived from developers current CSS
  • Custom easing
  • Instantiate multiple instances on a single page

Background-Image Transition Plugin

Submitted by georgi on March 1, 2009 - 10:21am

This plugin enables you to change the background image of an element which acts like a canvas.

Slides

Submitted by olle_t on January 19, 2009 - 7:17am

Very simple image slideshow plugin that easily applies to an img-element. Shows images with crossfade effect. Configurable image pause and fade times.

Code and issues are managed at http://github.com/olle/slides/tree/master

Agile Carousel:JQueryJerusalem2020J2IL Carousel Plugin

Submitted by Jerusalem2020j2il on December 3, 2008 - 11:22am

$('#slide_holder').agile_carousel({

first_last_buttons: "yes",

hover_next_prev_buttons: "yes",

next_prev_buttons: "yes",

pause_button: "yes",

slide_buttons: "yes",

slide_captions: "JQuery Carousel Plugin|Agile Slide Types|JQuery UI Effects Available|Agile Settings|Carousel That's Built to Order",

slide_directory: "agile_dogs",

slide_links: "http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list",