jQuery is enormously popular amongst developers since its release of January 2006 and even after Six years later, it is still maintaining its position as being one of the best JavaScript libraries due to its simplicity. There are currently thousands of jQuery plug-ins available on the web which cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLTtools, drag and drop, events, cookie handling, modal windows, even a jQuery-based Commodore 64 emulator.
The induction and inception of JQuery has made some stellar advancements during the past three to five years within the world of web development. Every other day web developers and programmers continually introduce new concepts and methods by which to create Flash like effects by pushing the envelope forward, whereas : Flash is becoming if not obsolete – definitely less and less utilized by web developers, and web admins within this respect.
Several years ago, many websites were using Flash in order to create many of the components which Flash once possessed, however those days have now come to an abrupt halt and nearing their demise as far as implementation is concerned, since script languages such as JQuery and Mootools are replicating all of the effects which Flash once had done in the past.
jQuery’s syntax is designed to make it easier to navigate a document and provides capabilities for developers to create plug-ins on top of the JavaScript library. In this article we are presenting users with the Top 15 Newly Released jQuery Plugins, which will enable advanced effects and dynamic web pages for every site owner. We hope you will find the list handy and useful. Enjoy !
1. Sly : Flexible & Item Based Scrolling for jQuery
Sly is a jQuery plugin that offers item-based (like image/content galleries) scrolling with many useful options. Within a defined container element, items inside can be browsed with the help of a scroller or with the functions provided like next, nextPage, toStart, toEnd, 5 toStart, etc. It features different navigation logics which can auto-position next items or keep the active item always in the center. There is support for infinite scrolling and it work both horizontally or vertically.
[zilla_button url=”http://darsa.in/sly/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
2. Fine Uploader : JavaScript Powered File Uploader
Fine Uploader is a plug ‘n’ play script that ease file uploads and improve usability with the Ajaxed interface. Uploader can be the standard “file input” or it has support for drag ‘n’ drop uploads as well. It only requires us to insert a CSS + JavaScript file and the rest is taken care of on the server-side with your favorite scripting language. No worries, ASP.NET, ColdFusion, Java, Node.js, Perl, PHP, Python implementations are offered in the download package.
[zilla_button url=”http://fineuploader.com/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
3. jQuery Socialist : Create a Single Stream From Multiple Networks
jQuery Socialist is a plugin which can aggregate activity from multiple networks and display it as a single feed. It can get the contents from Facebook pages, Twitter, LinkedIn, YouTube, RSS and many others with ease. The plugin can present the combined stream as a Pinterest-like responsive layout or any other custom one you can design (multiple ready-to-use themes exist).
[zilla_button url=”http://plugins.in1.com/socialist” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
4. SlideControl jQuery Plugin
SlideControl jQuery Plugin allows you to easily make custom sliders for range inputs. You can set the speed, which controls the speed of the animation for a slider resizing. You can also set the LowerBound and UpperBound, which is the minimum and maximum amount the slider can be set to.
The CSS file included should be pretty straight-forward. You can change the look of your slide controllers in there from background color to size to how the handle looks. Just take a look around and it should be pretty easy to make changes.
[zilla_button url=”http://nikorablin.com/slideControl/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
5. Tiny Circleslider : A Lightweight Circular Slider
Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library. It supports iPhone, iPad and Android as well. A interval can be set to slide automatically every given milliseconds. You can fire a callback after every move. It is easy customizable and lightweight with only 130 lines of code. The minified size is only 4 KB.
[zilla_button url=”http://baijs.nl/tinycircleslider/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
6. jBar : Call to Action Bars with jQuery
Call-to-action-bars are great for generating notification about user’s account, a promotion on a product or similar usage and jBar, a jQuery plugin eases creating them. jBar notifications are displayed for a few seconds at the top of the web page and toggles automatically. After that user can click a ribbon to show/hide it. The plugin is lightweight and its functionality + style can be completely customized quickly.
[zilla_button url=”http://www.toddmotto.com/jbar-plugin-the-jquery-call-to-action-bar” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
7. jQuery Stick ‘Em : Make Content Sticky on Scroll
jQuery Stick ‘em makes Content Sticky on Scroll, to a Point. Sometimes, we have some of those images were very tall. So by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the text to give you context about the images you had just viewed.
The solution is to make the content sticky as you are scrolling. The tricky part was that we couldn’t just make the text position: fixed once it reached the top of the screen and be done with it. Since there are many sections on a page sometimes, we had to “un-stick” the content at a point too. So here we go, jQuery Stick ‘em, to enable this functionality.
[zilla_button url=”http://viget.com/inspire/jquery-stick-em” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
8. jQuery Countdown Script
The script allows us to set the countdown by mentioning a specific date-time or an offset. It is possible to use multiple instances on the same page, start-stop the timer and much more.
[zilla_button url=”http://www.littlewebthings.com/2010/02/jquery-countdown-script/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
9. Countdown
This is probably the most advanced countdown solution which can actually count down and up. There is support for timezones, multiple languages, pause/starting and callbacks on given timestamps.
[zilla_button url=”http://keith-wood.name/countdown.html” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
10. VintageJS : Vintage Effect for Photos
VintageJS is a jQuery plugin that uses the html5 canvas element to add a great vintage look to your photos. It comes with three effect-presets and can be customized very easily. To use vintageJS you need the latest jQuery build, and a browser that supports the HTML5 canvas element.
You can change the effect by adding options to the vintageJS call. VintageJS was tested and worked fine in the following browsers: Mozilla FireFox 3+, Google Chrome 9+, Apple Safari 5+, Opera 11+ and Internet Explorer 9. It is licensed under MIT and GPL License.
[zilla_button url=”https://github.com/rendro/vintageJS” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
11. CSS3 Tilt-Shift Effect jQuery Plugin
TiltShift.js is a jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6. It allows you to define the focus point, the blur radius, the amount of area that is in focus, the amount of area between complete focus and complete blur, and the direction of the effect. TiltShift.js is released under GPL License.
[zilla_button url=”http://www.noeltock.com/tilt-shift-css3-jquery-plugin/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
12. Freetile : Pinterest Like Layout Plugin
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. A smart animation routine allows distinguishing between elements that is meaningful to be animated and ones that are not (e.g. elements that have been just added to the arrangement, or those that are not visible). Special classes allow for explicitly limiting animation to select elements.
[zilla_button url=”http://yconst.com/web/freetile/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
13. jQuery Timing : Timing & Loops Made Easier
jQuery-Timing is a plugin for the framework that simplifies and improves the usage of timing-related events + loops. Using the jQuery’s chain syntax, it is possible to wait for events/animations to be completed, define timeouts and run sequential or parallel loops. These are already possible but require the usage of callbacks that end up in longer lines of code. jQuery-Timing solves all in the same line (chain).
[zilla_button url=”http://creativecouple.github.com/jquery-timing/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
14. Avgurd.js : jQuery Plugin for Modal Boxes and Popups
Avgrund.js is a jQuery plugin for modal boxes and popups. It uses interesting conceptshowing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). It has been tested with jQuery 1.4+. And it is lightweight, file size is under 2Kb. It is licensed under MIT License.
[zilla_button url=”http://labs.voronianski.com/jquery.avgrund.js/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
15. Slab Text : For Producing Bold Responsive Headlines
SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.
The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
[zilla_button url=”https://github.com/freqdec/slabText/” style=”black” size=”medium” type=”square” target=”_blank”] Download [/zilla_button]
No Responses