Best jQuery Plugins

JAIL, jQuery Asynchronous Image Loader Plug-in, Image Postloading Makes Sites Load Faster

Fri, 27 Apr 2012 23:05:00 GMT

Lately we've been creating websites that have huge photo galleries needing hundreds of photos on one page. In one client project, our home page needed to load about fifty page-wide photos to display in an animated slide show.

Without JAIL, a jQuery plug-in designed to load images after the rest of the page loads, website visitors would be frustrated waiting many seconds before they would see a readable web page.

jQuery Asynchronous Image Loader lets you delay loading the photos until after the page appears. With it, we can put up the first photo in our slide show as a placeholder, then after the remaining photos are loaded our slide show can begin.

Download JAIL Plug-In

Animated Modal Message Alerts and Forms with Reveal jQuery Plugin

Wed, 04 Jan 2012 01:52:00 GMT

Lots of sites I design require either message alerts to get the user's attention, or animated forms that slide into place. I use to code these one-by-one with jQuery but that's time consuming. Now I can often just use one cool jQuery plugin, Reveal, to handle all these needs within a site.

Reveal is easy to use. Just add a tiny JavaScript to your site, a few lines of CSS to your stylesheet, and create the HTML that will hold your popup messages or forms. They will stay hidden until a user clicks a button or link, or you can have your own code cause a popup to appear when a user changes a form field or hovers something on the page. Then the Reveal window, instead of popping up, will animate in from the top of the screen, dimming the background of your web page to focus user's attention. When the user clicks anywhere on the page or on the close button, Reveal animates the window off the screen. There are demos on the Reveal website.

Learn more about Reveal

Make Responsive Videos that Resize Automatically to fit Phone, Pad, and PC Screens

Fri, 23 Dec 2011 14:12:00 GMT

Designing responsive web designs that can resize pages automatically to fit whatever screen size the user has became very important as more and more folks use mobile devices like smart phones and IPads.

A nagging problem is how to make a video player resize to the maximum width the screen allows. It's quite tricky if not impossible to do with ordinary HTML and CSS. Fortunately, Chris Coyier and Paravel created a jQuery plug in that makes it very easy with one line of jQuery to make videos resize to the user's screen. It works with embedded videos from You Tube, Vimeo etc. or with your own player.

Download here: Responsive Videos with FitVids.js

qTip - Popup Tooltips for your Website

Tue, 13 Dec 2011 18:17:00 GMT

qTip is my favorite jQuery plug-in to add popup tooltips to your website. When your user hovers a mouse over a tip-enabled word or graphic, a popup tooltip appears to provide help or clarification.

You can see it in action on a site I built at eZenTea.com. Just hover a product in the catalog and a popup tooltip explains details about it, making it easy for shoppers to compare teas without having to go to each product's page.

What's great about qTip is you can style the popup balloon to look anyway you need to match the design of your website, using CSS. It can be a simple small box, a speech balloon with a pointer, and so on. qTip lets you adjust where the pop-up tooltip appears: above or below, left or right or center.

You can learn more about qTip popup tool tips at qTip Website

Quicksand Plugin - Animated Sort and Filter HTML Lists and Data

Tue, 13 Dec 2011 18:19:00 GMT

Need a sexy way to reorder a list of items, like a photo gallery or database list? Quicksand Plugin is the best jQuery plugin you'll find. Click the button below to see a demo. There are more advanced demos on the site you should explore, too. Quicksand is easy to install and use. It can exchange one HTML UL LI list of items for another using an animated fading effect. It can also sort and filter a single HTML list. Yet another option is to get data with Ajax from a database URL or another web page, while your user sees a really cool animation as some objects move or fade away and others appear. Quicksand Plugin