jQuery WordPress plugins

Below you will find collection of WordPress plugins that use jQuery.

jQuery Sliding Panel in WordPress

jQuery-based, fully-widgetized sliding panel to your WordPress-powered site.

View Tutorial

WordPress Post Information Plugin

This plu­gin aims to con­sol­i­date your post infor­ma­tion into a col­lapsi­ble panel (using jQuery) that can save space on your page.

View Tutorial

Infinite Scroll

Infinite Scroll adds the following functionality to your wordpress installation: When a user scrolls towards the bottom of the page, the next page of posts is automatically retrieved and appended.

View Tutorial

jQuery Comment Preview WordPress Plugin

jQuery simple but powerful Comment Preview WordPress Plugin allows the live comment preview without page reboot.

View Tutorial

Display a Random Post

In this post we will show you how you can create a page that displays a random post in WordPress.

WordPress jQuery Lightbox Plugin

Used to add the lightbox effect to images on your WordPress blog

jQuery featured posts slider in WordPress

jFlow is an awesome tool to use for this purpose because it’s super lightweight, and the code is retardedly simple .Automatically resizes pictures and updates itself. Easy to install and customize.

View Tutorial

Best jQuery Slider and Carousel Effects

Moving Boxes Carousel with jQuery

Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Agile jQuery Carousel

Highly customizable jQuery Carousel plugin so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development.

Wow Slider

WOW Slider is a jQuery image slider with stunning visual effects and tons of professionally made templates.

Icarousel

Carousel is an open source (free) javascript tool for creating jQuery carousel like widgets

Nivo Slider

Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup keyboard navigation and html captions.

Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Supersized

Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

Coin Slider

This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

Theatre Carousel

This jQuery Carousel can do both horizontal and vertical sliders and in particular the horizontal carousel looks awesome. Really simple to use and it has good control options.

Cloud Carousel

This jQuery carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

jQuery Ms Carousel

Each carousel can have own look & feel and behavior. Put next/previous button wherever you want or don’t put anywhere its up to you. The most important part is; it returns a carousel object and do whatever you want.

RoundAbout for jQuery

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

Roundabout Shapes

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

Barousel

Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.

Anything Slider

AnythingSlider is a jQuery image slider Plugin with a lot of features ( Slides can be anything, Navigation tabs are built and added dynamically).

slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

3d Rotation Viewer

This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

Sideways – Fullscreen Gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

jMyCarousel

jMyCarousel is a free, highly customizable, non obstructive carousel written in javascript, based on jquery, and created to suit any need.

Orbit

Orbit is a killer jQuery image slider plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

Best jQuery form plugins

In this article I am going to showcase a list of best jQuery form plugins that enhance and beautify html form elements.

jQuery Auto Complete
This plugins adds an auto complete functionality to form fields, especially useful for searches. By entering more characters, the user can filter down the list to better matches.

Jqtransform – jQuery form plugin

This plugin is a jQuery styling plugin wich allows you to skin form elements and transform the entire look an d feel of the form.

jQuery Inline Form Validation

An Open Source jQuery Inline Form Validation Script, a versatile solution that works with every form.

ClearField

This plugin takes care of your input fields. It’s very simple actually: it changes the content of a form field when you click on it

Sexy Combo jQuery Plugin

Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes.

jQuery "Highlight" Plugin

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.

jax Upload

AJAX Upload allows allows users to easily upload multiple files without refreshing the page. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page).

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.

jQuery Watermarks for Inputfields

This simple-to-use jQuery plugin adds watermark capability to HTML input and textarea elements. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

Password Strength Indicator

Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good.

Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there.

jQueryui slider

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

Hot Keys

jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.

jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages

 

jQuery Advance Effects

jQuery is one of the most popular JavaScript frameworks which provides several advanced effects for your site. You can present content with More Interactive ways.

In this article we’ve gathered best and advanced Jquery Effects for Creating Awesome Websites for your use. Feel free to contribute your comments.

jQ Fancy Transitions

jqFancyTransitions is an easy-to-use jQuery plugin for displaying your photos as a slideshow with fancy transition effects.

Sliding Boxes

This is a beautiful, elegant and vibrant jquery plugin, which will add to your website an awesome, modern look.

Roundabout for jQuery

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

Flip Box

Flip is a jQuery plugin that will easily flip your elements in four directions. You can try it to see its power in action.

Circulate Circulate is a very funny and interesting plugin built with jquery. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circulate .

Tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute. By default, tooltips will appear centered underneath their anchor. It is also possible to control the positioning of the tooltip relative to the pointee. It is also possible to change the way the tooltip should appear.

Coda Popup Bubbles

popup bubble is a fantastic way to have tooltips in your site. Rolling the mouse over and out from the image you would be able to see the popup fade in and out of view, while gently gliding upwards. It can attract the visitors in a very fancy manner.

MobilyMap

MobilyMap is a jQuery plugin (7KB) that can create a Google Map like draggable interface from any image.

AnythingZoomer v1.0

With this script you can not only zoom in on images but also the whole content on your page. This could be pretty useful for many designers out there. Mouse over to see zoomed in version, double click to toggle between large and small versions.

jquery custom content scroller

Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support, scroll easing and adjustable scrollbar height/width.

jQuery Quicksand plugin

This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects. You could filter the applications and utilities separately and sort them either by their name or size.

CSS3 Lightbox Gallery

This plugin looks like it was written specifically for social-media. Dragging and dropping a photo on top of the “share box” will open a modal window that can be the interface to call an API via AJAX which can allow the user to share a photo on Flickr, Twitter, Facebook, and other sites.

AviaSlider

AviaSlider uses classic Flash-like transition effects includes an image preloader, autoplay and stop, supports linked images and size of only 8 kb works with jQuery lower and higher versions.

Beautiful Background Image Navigation

A compact design which includes three options in the form of vertical sliders with a unique background image which navigates with the options is achieved with this jQuery plugin, Beautiful Background Image Navigation.

Cloud zoom

A zoom jQuery plugin, Cloud Zoom displays a larger or zoomed out image of the particular area when hovered over the original image. This plugin is much smaller, has more features and has robust compatibility over browsers.

best jQuery gallery and slider

Aviaslider

AviaSlider, a slideshow plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects and size of only 8 kb works with jQuery lower and higher versions.

Coin Slider

As with most well written jQuery image slider plugins you can get awesome features on your web pages with only a few lines of code. Coin Slider is an excellent script for showcasing images on a web site or blog, fx. an online portfolio.

• Unique transition effects
• Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
• Valid markup
• Flexible configuration
• Auto slide
• Navigation box
• Lightweight (8kb only)
• Linking images
• Free to use under MIT licence
• Fully customizable using CSS

TN3 Gallery

TN3 Gallery is a full fledged HTML based customizable image gallery with jQuery slideshow, transition, CSS skinning and multiple album options. Compatible with all modern desktop and mobile browsers. Free and premium versions available.

Supersized

Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

Galleria

Galleria is a javascript image gallery written in jQuery. Images are loaded one by one from an unordered list and displays thumbnails when each image is loaded. Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership.

CU3ER Image Slider

an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.

Easy Slider

Easy Slider is a jQuery plugin, you can set up your own options and is easy to implement.

Anything Slider

AnythingSlider is a jQuery Plugin with a lot of features( Slides can be anything, Navigation tabs are built and added dynamically )

• 8 unique transition effects
• Lots of easy to set options to create your own effects
• Included Image preloader
• Autoplay that stops on user interaction
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• works with jQuery 1.32 and higher

3d Rotation Viewer

This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

Coin Slider

Coin Slider is a jQuery image slider with unique effects.

Nivo Slider

Nivo Slider is a new jQuery plugin with great features : 9 unique transition effects, Keyboard Navigation and Simple and clean.

• 9 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weighs 7kb
• Supports linking images
• Keyboard Navigation
• HTML Captions
• Free to use and abuse under the MIT license

Presentation Cycle

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.
Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

Great jQuery image slider plugin for content and images. It is very easy to use – only a few lines of code is needed.

Easy Slider

• numeric navigation (as an alternative to next/previous buttons)
• continuous scroll instead of jumping to the first (or last) slide
• auto slide
• continuous sliding
• “go to first” and “go to last” button
• hiding controls
• optional wrapping markup for control buttons
• vertical sliding
• multiple sliders on one page

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Reordering and filtering items with jQuery

Quicksand is a very functional jQuery plugin Reorder and filter items with a nice shuffling animation.Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. This plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects.

Demo

jQuery Plugins For Better Table Manipulation

This article we are sharing some useful jQuery table plugins for you to display, sort, filter and manipulate your data in table. These plugins help you to create superb tables which are easy to impliment.

1. DataTables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Features: ajax auto-loading of data, pagination, sorting columns, highlight sorted columns, extensive plug-in support, themeable by CSS

2. Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

3. 2. TinySort

A plugin to sort child nodes by (sub) contents or attributes. It is very useful for ordering unordered lists or tables, but works on any type of node.

4. jTPS

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability.

5. Colorize – jQuery Table Plugin

Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

6. Fixed Header Tables

Fixed Header Tables takes valid table HTML and builds a fixed header as done in Microsoft excel and a scrolling body with optional footer.

7. jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

8. Column Hover
A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

9. tablesorter

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It supports multi-column sorting, cross-browser and easily extensible via its widget system.

10. Table Drag and Drop JQuery plugin

I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag and drop as a JQuery plugin.

Three Best jQuery Tooltip Plugins

Tooltip is a way to show extra information when user hovers the cursor over an element. Browsers shows tooltip when you provide a title attribute but if you want to dynamic and more interesting user experience with create custom tooltip jquery is the best. In this post we show up best Jquery Tooltips tutorials and plugins for making your website more friendly and attractive.

1. TipTip :

jQuery plugin that allows use to create simple, customizable Tooltips for your web page. It is really lightweight

jquery elipsis – dotdotdot plugin

jQuery.dotdotdot is an advanced cross-browser ellipsis for multiple line content. It adds an ellipsis after cut off text to indicate that there is more text than currently visible. Not only on a single line of content, but also particularly on multiple lines of content.

To use add jquery library and script file in header and on document ready call function.
<script type=”text/javascript” language=”javascript” src=”jquery.js“></script>
<script type=”text/javascript” language=”javascript” src=”jquery.dotdotdot-1.2.1.js“></script>

$(function(){
$(‘.ellipsis, .ellipsis-e’).dotdotdot();
$(‘.ellipsis-r’).dotdotdot({
watch: ‘window’
});
$(‘.ellipsis-a’).dotdotdot({
after: ‘a’
});
});

CSS:

.box.box-half {
    float: left;
    width: 295px;
}

.box.box-7 {
    height: 110px;
}
 <div>
          <div style="height: auto; width: auto;">
content goas here...
</div>
</div>

For more details Visit: http://dotdotdot.frebsite.nl/

jquery plugin – Zoomooz image animation

jQuery Zoomooz is an easy-to-use jQuery plugin that can make any element on your page instantly zoomable.This slick animation effect is appropriate for an image gallery or portfolio. we can zoom in the element by clicking it and reverse it by clicking the web page body. Zoomooz provides some options including zoom size, scale mode (width, height and both), animation duration and easing mode.

feature :

• Make it work in older IE versions.
• Have zooming out return to the same scroll position
• Support for 3d transformations.
• Hide elements that are not shown while transforming.
• Kinetic scrolling.

For more details: http://janne.aukia.com/zoomooz/