For our “Best of 2010″ series we’ve already shown your our picks for best free WordPress themes and free fonts. So for this week the focus in on jQuery. This javascript framework continued to grow in popularity during 2010, which meant an abundance of plugins being released. This made it difficult to choose our favorites. We made a conscious effort to choose from a variety of types, and ones that were useful to web designers and that had some wow factor. Here are our picks for the Best jQuery Plugins of 2010.
Nivo Slider
A super smooth slider with loads of settings including 9 transition effects. It also supports things like linking images and keyboard navigation.
Quicksand
Reorder and filter items with a nice shuffling animation. Just specify source container and destination collection which will replace the source collection. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.
Spritely
Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript.
Lettering.js
Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.
Colortip
Colortip converts the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
Masonry
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
gvChart
gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. It is easy in use and additionally it allows you to create five types of the charts.
Animated table sort
This plugin allows you to animatedly sort a table based on a column’s
jQuery Image Scale Carousel
When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what’s so nice about this jQuery plug-in; you don’t have to worry about all of your images being perfectly sized for this slider. The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.
YoxView
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich. You can use it to display a variety of media, such as: images, video, inline content, iframes, Flash and more.
10 Fresh and Useful jQuery Plugins
When it comes to adding JavaScript functionality to a website, jQuery has become the solution of choice for web designers and developers. With it’s ease of use and ever-growing selection of plugins, there’s really no point to look elsewhere. Awesome jQuery plugins are popping up everyday, and we’re always on the look out. So for this post, I’ve gathered 10 fresh plugins that you should find very useful.
Cute Balloon
Cute Balloon is a jQuery script that allow you to easy make a beauty tool tip balloon, also with ajax content.
Captify
Captify is a plugin that displays simple, pretty image captions that appear on rollover. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment). Also, it’s only 2.3kb!
gvChart
gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. It is easy in use and additionally it allows you to create five types of the charts.
jmapping
This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.
jQuery.validity
jQuery.validity is an elegant and powerful jQuery plug-in you can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.
Animated table sort
This plugin allows you to animatedly sort a table based on a column’s
Flare Video
This plugin gives you the ability to easily add an HTML5 video player with Flash fallback.
Coin Slider
Coin Slider is a jQuery image slider plugin with a unique square transition effect.
Blockster
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.
Colortip
Colortip converts the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
When we see an image on a web page, it’s second nature for us to move our mouse over it or try to click it. We have come to expect some level of interactivity when it comes to images, especially with modern web design technologies, such as jQuery. If you happen to be working on a project that requires the images to have a little something extra, then jQuery is the way to go. To help you out, we’ve rounded up 10 jQuery Plugins and Techniques for Doing More with Images.
Photo Zoom Out Effect
Here you’ll learn how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.
jCrop
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Zoomer Gallery
Zoomer Gallery allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. Its a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, its both compact and surprisingly easy to use.
jQuery Captify Plugin
Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer.
Animate Panning Slideshow with jQuery
In this tutorial youll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.
Sponsor Flip Wall With jQuery & CSS
In this tutorial you’ll learn to create an interactive sponsor wall that fits a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.
jSquares
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.
ZURB JavaScript Annotation Plugin
A plugin to easily add and save annotations on an image.
Zoomooz
Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.
iViewer
iViewer is a plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.
Every now and then a web project will come up that has special and unique layout requirements, and the current capabilities of CSS just aren’t enough. With projects such as these, jQuery can be your best friend. So here are 10 jQuery plugins to help you out with page layouts.
UI.Layout
The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.
mb.containerPlus
This plugin let’s you build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.
css-template-layout
The project aims at providing web designers with a way to use the W3’s CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification. Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.
Masonry
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Columnizer
Columnizer will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.
jQSlickWrap
jQSlickWrap forces text to wrap around the contents of an image, not just its bounding box as it does when you use a float with CSS.
Equal Heights
Equal Heights loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.
js-columns
js-columns is designed to help with the creation of newspaper-style column layouts in HTML. While CSS3 has a variety of column-style properties, these are not yet widely implemented, and none help with the creation of page-based layouts.
Columnize
jQuery Columnize allows you to create a newspaper-like column layout.
jLayout
jLayout provides four layout algorithms for laying out HTML elements in web pages. This plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.
14 Fresh and Useful jQuery Plugins
jQuery has changed the way developers write JavaScript and the way users interact with websites and web applications. If you’re a developer, you know what a joy working with jQuery can be, especially the convenience of plugins. In this post, we’ve rounded up 14 fresh and useful jquery plugins that have been released in the past few months. You’ll find that these plugins offer a wide range of functionality, from navigation enhancements to image viewing.
BubbleUp
With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin’s effect is not awesome like that, it’s light weight for such a similar zooming effect.
Spritely
Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript.
jQuery-Notes
jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.
Quicksand
Reorder and filter items with a nice shuffling animation. Just specify source container and destination collection which will replace the source collection. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.
YoxView
YoxView is a popup image viewer, built using jQuery 1.4. It’s simple to use yet quite powerful.
Key Features:
- Images are resized to fit inside the browser’s window
- Images can be pre-cached
- Multiple instances in the same page may be used, ideal for blog entries, for example.
- Fully configurable – each instance may have a different configuration.
Masonry
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Ttabs
Ttabs tweaks html markup and then calls UI Tabs function. You do not need to specify the list of tabs before the first tab section. The plugin creates it from the headings, or you can specify the tab labels right in the javascript code.
TipTip
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!
jQuery Photoshoot
jQuery PhotoShoot gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.
jqFancyTransitions
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. It’s compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
jQuery imageless buttons a la Google
This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.
jQuery.sheet
jQuery.sheet gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.
TopUp
TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.
jquery mb.extruder
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.