Many web developers are jumping into the sea of open source code = projects.=20 New plugins and frameworks are released almost every day. And when you = are busy=20 at work it can be tough keeping up with all the newest releases.
In this showcase I have put together over 30 different jQuery plugins = worth a=20 mention to all web developers. Developing a website interface can be = tough and=20 certainly requires careful precision. Developing on top of any open = source=20 project means that you are not reinventing the wheel. Plus = you=E2=80=99re not the only=20 one left to catch bugs in the code. And since jQuery is one of the most = stable=20 JavaScript libraries available, these plugins often work hand-in-hand to = provide=20 a seamless user experience.
= Responsive=20 Touch-Friendly Audio Player
This responsive audio player is the perfect example of jQuery at = work. You=20 simply include the plugin codes and create any typical HTML5 audio = element. This=20 will automatically be converted into a touch-friendly audio player with = a=20 dazzling CSS3 user interface.
Sidr
I am sure plenty of designers & developers recognize the sliding = side=20 menu. This became popularized from iOS mobile applications using sliding = menu=20 buttons in the toolbar. And now this effect may be replicated for = websites using=20 only jQuery and the Sidr plugin. Check out the live demo and see how = this could=20 work in your own projects.
Imageloader
Do you remember seeing all these lazyload image plugins? There are so = many=20 various options, and even some free open source WordPress plugins have = been=20 released. This particular image loader plugin follows a much nicer = example with=20 all images loading in a sequential order, following a fading effect. The = live=20 demo is a prime example of how you can apply this to your website.
Swatches
Although Swatches may not have a practical use in many website = layouts, it is=20 a wonderful jQuery plugin for toying with specific colors. This plugin = will=20 create a div area using a palette of related colors based on your input = choice.=20 Generating your own color scheme may be difficult and this is a unique = open=20 source tool for the job.
Hot on Facebook
Hot on Facebook is a rather obscure idea. But the plugin does work = perfectly=20 in all standards-compliant browsers, so for those who enjoy Facebook = sharing=20 this is for you! Hot on Facebook will take a URL and check the total = number of=20 FB shares. Then it will be displayed on the page as a social media = sharing=20 badge.
Toolbar.js
The open source Toolbar.js script is fairly easy to run, but has its=20 limitations. This plugin will create a small tooltip menu of icon links = which=20 appears on any element you choose. It can be immensely powerful coupled = with a=20 user profile or other icon-command interface. However the effect is = rather=20 obscure, so don=E2=80=99t be surprised if you have a hard time fitting = this into your=20 layout.
jQuery=20 PowerTip
As for handling regular tooltip hovers you may consider jQuery = PowerTip. This=20 is a fairly new plugin released as open source on Github. You can check = out the=20 live demo to see a better example, but the simplest explanation is = creating=20 tooltip popup menus when hovering over some HTML element.
jqTimeline
The jQtimeline plugin offers very unique functionality which I have = never=20 seen before. You can build a horizontal timeline with date events setup=20 throughout the list. In this way, users may click on an event to display = more=20 information. It certainly has its practical uses but will take a bit of = custom=20 code to get working properly.
Swipebox
The Swipebox plugin is a mobile responsive jQuery image gallery. This = is=20 especially designed for mobile webapps and websites which are made = responsive=20 for smartphones and tablets. The image gallery will take up the entire = screen,=20 and you can even touch-to-swipe between other images in the = slideshow.
MixItUp
MixItUp has a lot of various custom options and I would say this is = closer to=20 an intermediate jQuery plugin. You will need to understand a few = concepts when=20 customizing the default setup and adding this into your page. But it = will allow=20 quick sorting of elements within a set gallery like portfolio items, = images,=20 photographs, and so much more.
jQuery=20 Spellchecker
Designers who are familiar with the in-browser spellcheck may be a = fan or may=20 completely hate it. This jQuery plugin offers a different solution where = you may=20 edit the callback function to display related vocabulary. It is a daring = plugin=20 which is completely free to use, but also requires a bit of = customization to get=20 working correctly.
ScrollUp
ScrollUp is in my top 5 new favorite plugins just for its ease of use = and=20 pre-built styles. Simply include the JS files into your webpage and = setup the=20 offset distance from the top. Then after a visitor scrolls beyond this = limit a=20 small fixed div will appear in the bottom corner. It is an excellent = alternative=20 to coding your own button from scratch.
Nod Frontend = Validation
Nod is a frontend validation plugin for HTML input forms. Using = jQuery you=20 may setup the actual basis for what is considered good and bad data, = then check=20 these values after the user submits the form. It will not go through = until all=20 of the criteria are met.
Select2
Select dropdown menus have always been stuck in their own CSS styles. = There=20 are some posts online which delve into customizing your own select menu, = but=20 often not supported by all browsers. This jQuery plugin Select2 is an=20 enhancement on the typical HTML select field. Just include the plugin = within=20 your heading and all select menus can be updated with a small bit of = code.
Tooltipster
Aside from the other great jQuery tooltip plugin, I have to recommend = Tooltipster for their alternative codebase. I have used Tooltipster in a = few=20 projects and it works just as described. Many of the options are so easy = to=20 implement, and this allows developers to customize their own tooltips = with just=20 a few CSS properties.
Vortex
This strange carousel-style plugin allows you to create a dynamic = rotating=20 panel of elements. The jQuery Vortex plugin is fairly new, and there are = still=20 updates being applied on a regular basis. However I think it is worth a = mention=20 since the techniques are still not as mainstream as you might = expect.
iCheck
iCheck is one of the best jQuery plugins I have ever found to update = your=20 input fields. Checkboxes and radio buttons will receive a totally new = look when=20 you choose the proper skin and color style. I will admit that iCheck is = a bit=20 deceiving with so many confusing options at first. But the more you = practice the=20 easier it will get to include this plugin within your website(s).
Any List Scroller
ALS or Any List Scroller is a typical jQuery plugin for image = slideshows. But=20 instead of displaying the images in a bigger view, they are rotated like = a=20 typical homepage items scroll container. There are options to include = arrows on=20 both sides and allow visitors to manually switch between internal = elements.
Tumbo
Tumbo is a fairly rudimentary plugin for quickly displaying a feed = out of=20 your Tumblr blog. This can be updated to display the contents from any = Tumblr=20 blog just by using the subdomain URL. Obviously not everybody will have = a need=20 for this, but it is good to know that developers are working their way = through=20 APIs like Tumblr built into JavaScript plugins.
Spectragram=
Speaking of APIs =E2=80=93 this Spectragram plugin is a quick method = for accessing=20 photos off Instagram. You simply include the JS files into your header = and then=20 specify a user or search query. The Spectragram plugin will pull all = related=20 results and link back to the original shot.
jQuery = Stripe
The jQuery Stripe plugin offers a more traditional image gallery. = Each photo=20 will only display as a small vertical sliver which you may click to show = the=20 whole image. There are also arrows on the right and left sides to change = between=20 views. I don=E2=80=99t think it is the best option but it can be an = offbeat solution for=20 atypical website layouts.
SocialCount
SocialCount handles another strange feature which does get a lot of = requests.=20 This plugin will allow you to quickly pull out the numbers for Twitter,=20 Facebook, and Google+ shares. Merely enter the target URL and you can = display=20 social media badges anywhere in your webpage.
Custom=20 Scrollbar Plugin
jQuery Custom Scrollbar is a fascinating plugin which deserves a lot = of=20 attention. This has been online for quite a while now, but the effects = still=20 never cease to amaze. You can quickly make a div element with an = overscroll=20 feature using these custom scrollbars. It is perfect for handling custom = content=20 which should not take up the entirety of the layout.
Smallipop<= /A>
Smallipop is yet another beautiful jQuery tooltips plugin. You should = look at=20 some of the examples to see how this would be implemented. Each tooltip = plugin=20 follows its own rules and they may or may not appeal to everyone. But I = think=20 Smallipop is a great choice for developers getting started in JavaScript = libraries.
jPanelMenu
jPanelMenu is another popular jQuery plugin for using a sliding = navigation.=20 You may quickly include these codes within your website to add the = effects on=20 any page. Just target the open/close element and whenever the user = clicks, it=20 will display your hidden navigation. Take a peek at the live demo to see = this=20 effect in action.
Intro.js
Intro.js is an introduction guided tour plugin for jQuery. There are = a lot of=20 options and custom settings you may choose, but this also allows for a = more=20 unique website performance. I think Intro.js is the best jQuery plugin = for=20 creating a guided website tour. The CSS is easily malleable and you can = demo=20 with all sorts of different layouts.
Lightbox_me
The list of shadowboxes and lightboxes has grown tremendously since = 2011. I=20 think the jQuery plugin Lightbox_me is another beautiful example of this = feature. You can setup images, forms, videos, and other HTML right = within a=20 modal lightbox. The JS codes are easy to learn and the plugin does not = require a=20 whole bunch of custom edits.
jQuery=20 Carousel
I think the abitgone = jQuery=20 Carousel is definitely a peculiar option. This will display = prev/next links=20 right within the image div encapsulating all of the other images. It = looks=20 really nice in smaller spaces and you can resize the example to anything = you=20 need. I feel it is worth looking into but it may not come out as your = favorite=20 option.
Superbox
Are you familiar with how Google Images currently displays results? = This is=20 how jQuery Superbox works using your own static images. Visitors have = the=20 ability to browse thumbnails and once they click, a new div will open up = displaying the full image. I really like this plugin because the user = experience=20 mimics Google very closely. And since people are already familiar with = Google it=20 provides a seamless exchange of data without much confusion.
KG= allery
KGallery is another beautiful jQuery image gallery with slideshow = features.=20 The default icons are not permanent and you can obviously update other = bits of=20 the user interface. What really catches my attention is the option to = include=20 smaller image thumbnails within the gallery design. It is a fairly = simple plugin=20 to setup and I would recommend testing the live demo to see how you feel = about=20 the implementation.
jQuery=20 Litelighter
Plenty of great syntax highlighters have been released over the past = few=20 years. But jQuery Litelighter is another plugin I really appreciate for = the=20 simplicity and graceful nature. You can generate highlighted syntax for = nearly=20 any popular language, and it should work using any of the most common = web=20 browsers.
bxSlider
bxSlider simply has one of the best user experiences for an image = slideshow.=20 You can implement this right onto your homepage or within any other page = of the=20 site. It will provide a solid design for users who are familiar with = image=20 slideshow features. Also the jQuery codes are very minimalist and do not = bog=20 down the website over long loading times.
MeanMenu
The MeanMenu plugin is a newer release and certainly worth looking = into. I=20 really like how the default navigation design will automatically resize = based on=20 the total number of internal links. Also you can include sub-menu links = which=20 offers visitors a quicker view of your nav menu. The design is not a = great=20 choice for everybody, however it is a solid plugin and may prove useful = on some=20 website projects.
Comments & Discussion