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.

slide


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

jQuery Button Animator plugin by iTg

Submitted by swashata on July 26, 2010 - 1:50am

Overview:

jQuery Button animator plugin adds some animation effect to the HTML buttons. The buttons can be made via HTML link and image tags or even by CSS Sprite (recommended). There is no restriction on what the HTML markup is or can be! Just be creative and add some interactivity to your creativity with our plugin! iTgButtonAnimator is capable of 5 types of different animations:

  • Slide Up animation: Buttons moves a specified pixel up when hovered
  • Slide Down animation: Buttons moves a specified pixel down when hovered
  • Fade animation: Buttons fade out when hovered (upto a specified transparency)
  • Slide Up Fade: Adds fade animation to the slide up
  • Slide Down Fade: Adds fade animation to the slide down

Check in our Demo Page for all the animations...

Sudo Slider

Submitted by webbies on July 22, 2010 - 6:20am

Sudo Slider makes it easy to make any kind of slider, using just this Javascript.
It supports browser bookmarking, back/forward buttons. Multiple sliders pr. page and much much more.
It's fully cross-browser compatible (as much as jQuery itself).

div slideshow

Submitted by kevinresol on May 21, 2010 - 5:06am

While most slideshow plugins on the web are for <img> only, divSlideShow provides a more flexible slideshow for <div>, you can embed anything inside a <div> and make it a slideshow, such as images, text, flash... anything that you normally include in a webpage, with only one line of javascript call.

The Quotator

Submitted by jruddell on May 12, 2010 - 2:57pm

Background

Originally the quotator was a quote, rotator. It would rotate html elements on a timer displaying different quotes.

Over time the quotator developed into a multi featured jquery tab animation plugin.

The quotator works with targets (handles/tabs) and their related data.

What is special about the quotator is that it does not require a special HTML structure to work. The targets and content are selected by css selectors within the master container. The targets and content are paired sequentially by the order found in the HTML.

Simple collapsible panel

Submitted by darreningram on April 8, 2010 - 10:23am

A simple plugin to transform a div into a sliding collapsible container.
It also works with jQuery UI themes - so if you already have a theme in your web site then the panels will pick up on this and will be styled appropriately.

Usage

Create a container div with a class of 'collapsibleContainer'. Give the div a title attribute. The plugin will turn the div into a collapsible container using the title attribute within it's heading area.

<div class="collapsibleContainer" title="Example Collapsible Panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!) </p>
</div>


To fire the plugin, simply select all the divs with class collapsibleContainer and call the collapsiblePanel function.

Sliding Door Plugin

Submitted by SurrealDreams on March 10, 2010 - 12:21am

This plugin will take a selected image or set of images and replace it with a container with two halves which slide open and turn translucent on mouseover. The open halves reveal the alt tag text of the original image. Any links on the image are preserved along with their classes, and a configurable text label is added to the alt text. You can configure the time to open the "doors," close them, the opacity, the text indicating there's a link, and how far open the doors go (as a percentage).

There is one known bug, which is that the original link is not removed and makes the entire structure a clickable link.

The image needs to have a set size or some browsers won't be able to figure out the size. Also, please ensure that your image is not scaled in HTML - the script isn't able to scale back the halves to match the original so it will look strange.

SFS carrousel

Submitted by nick.stemerdink on December 28, 2009 - 8:14pm

Stemerdink IT

carrousel

The carrousel plugin allows you to easily create a good looking slideshow with many options

Options

  • scale - Zoom on the active element
  • default - Initially zoom in the element with this index
  • moveLeft - Bind an alternative element that will trigger the function to move to the left
  • moveRight - Bind an alternative element that will trigger the function to move to the right
  • clickMove - When any element is clicked it will become active

Required CSS:

#carrousel {width: 800px;}
.scroll {overflow: hidden;}
.items {position: relative;}
.items div.panel {float:left;}

HTML structure

Example item 1

Paragraph text http://www.example.com

Slideshow Lite

Submitted by canglan@gmail.com on August 4, 2009 - 2:54am

Slideshow Lite is an easy to use, simple and lightweight slideshow plugin.

Sliding Image Gallery

Submitted by ender2021 on July 17, 2009 - 6:57pm

The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).