Most of the web designers have been using a good deal of jQuery plugins and tutorials. In this article I have provided a gallery of the 15 favorite plugins and tutorials that many developers will love to use. Some of these you may have already seen, others might be new to you.
Are you looking to contribute to our design community?
Suggest a link to a relevant article, or submit your own! You will help push the design community to much higher levels.
jVectorMap is a jQuery plugin employed to show maps (at the moment only world map, but in the future other maps will be available) and visualize data on HTML pages. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML. Using jVectorMap is pretty simple as for any other jQuery plugin.
This gallery has 4 different views (standard, with captions, vertical and minimalistic). Important notes â€“ that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result â€“ we will have a beautiful gallery with an intuitive interface.
Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etcâ€¦ as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.
You need to set title, width and height attributes on images to display title on panel and activate the sliding effect on images.
The Calculation plug-in is designed to give easy-to-use jQuery functions for commonly used mathematical functions.
This â€˜product sliderâ€™ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.
The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.
The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.
There’s some really cool stuff going on here (in my opinion). For starters, as I said above, we only want to act on elements that have valid XHTML configuration (container and nested img).
When you have a a large list of items (e.g. search results or news articles),
you can display them grouped in pages and present navigational elements to move
from one page to another. This plugin creates these navigational elements.
So I finally found time to add a much-requested feature to Coda-Slider: Different classes for each tab. Now you can target individual tabs and give each one a different look.
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.