Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

11 jQuery Plug-ins & Techniques Transforming The Web Drastically

Wordpress jQuery plug-ins

With this post Monks have tried to explore some of the top jQuery plug-ins from usability point of view. Segregated as per their core functions, these WordPress plug-ins will help enhance your website’s UX.

Navigation

1. Nav-o-Matic

Single sprite navigation,although very good, can be tiresome to develop. You’d have to measure the Photoshop slices with pixel perfect precision, code the CSS taking absolute care and then perform some cumbersome calculations to arrive at an ideal single sprite navigation. But Nav-o-Matic does all of the above functions that too in a few clicks! Neat, huh?

Nav-o-maticImage Source: www.webresourcesdepot.com

2. TipTip jQuery Plug-in

TipTip is a super light plug-in that doesn’t use images at all. It is absolutely customizable via CSS and functions by identifying the edges of the browser window and ensuring that tool tips stay within current window size. With TipTip all your tooltips will be adjusted to get displayed on the top, bottom, left or right of the element where you apply TipTip.

TipTip

 Image Source: churchofrabbit.com

 Slideshows & Galleries

3. Nivo Slider – Slideshow jQuery Script

With 9 exclusive transition effects and a horde of other options this jQuery image slider plug-in is a must-have. It’s sleek and lets you set functions that need to be operational prior to and after the image transition and also lets you define animation speed and activate pause on hover.

Nivo Slider - Slideshow jQuery Script

 Image Source: designmodo.com

4. Quicksand jQuery Plug-in

Structure out items by reorganizingand sorting them, that too with an awesome shuffling animation with this jQuery plug-in.

Quicksand jQuery Plug-in

Image Source: www.tripwiremagazine.com

 Content Improvement

5. Dynamic Footnotes With CSS and jQuery

To improve UX with footnotes, use Dynamic Footnotes,which displays the footnote content when users hover over the footnote symbol. In a way Dynamic Footnotes interacts with users by displaying content that they seem to hold interest in knowing and thereby, improves their experience as they do not have to scroll down all the way to view the content.

Dynamic Footnotes With CSS and jQuery

 Image Source: www.jquerycode.com

6. Captify jQuery Plug-in

Captify enables displaying simple, attractive image captions that appear on rollover. Tested for numerous browsers like Firefox, Chrome, Safari, and Internet Explorerit is inspired by Image Captions a similar plug-in, but is more efficient than ImageCaptions.

Captify jQuery Plug-in

Image Source: www.sitepoint.com

 Layouts

7. Columnizer jQuery Plug-in 

Columnizer automatically splits content into required no. of columns as per the browser and browser window size. It is compatible with all major browsers and works without any complex CSS tricks.

Columnizer jQuery Plug-in

 Image Source: jquer.in

Graphs& Maps

8. Dygraphs – Open Source Javascript Library 

Available in the form of an open source JavaScript library, Dygraphs generates interactive, zoom-able charts of the present time series. Primarily designed to display dense data sets, it enables users to drawinferences from them.

Dygraphs - Open Source Javascript Library

 Image Source: www.designyourway.net

9. gMap jQuery Plug-in

This flexible and highly customizable plug-inenables you to embed Google Maps into your website.Using longitude and latitude you can specify the location of your gMap object. You can also customize the marker image, enable/disable zooming with mouse scroll-wheel and perform many other mapping functions using this amazing plug-in.

gMap jQuery Plug-in

Image Source: speckyboy.com

Images & Visual Effects

10. jqFancyTransitions – jQuery Image Rotator Plug-in

As the name states jqFancyTransitions enables displaying photos in the form of a slideshow with fancy transition effects. User-friendly and agile, this plug-in will help you explore many novel image transition effects.

jqFancyTransitions - jQuery Image Rotator Plug-in

Image Source: www.freebiewebresources.com

11.  Sponsor Flip Wall With jQuery and CSS 

A huge amount of data needs to be squeezed in into sponsor pages.And this needs to be done while ensuring that all of the data is well organized sothat the sponsors are the highlight of the page design and nothing else. Sponsor flip wall facilitates this very function and very efficiently so.

Sponsor Flip Wall With jQuery and CSS

Image Source: tutorialzine.com

These were a few plug-ins that the Monks consider to be a great value addition to the UX design of any website. If you want to add 100s of interactive components to make your website look really appealing, visit our library full of jQuery components.

The following two tabs change content below.
Avatar

Webby Monks

Webby Monks, a sister concern effort of Email Monks, offers a great deal of PSD to interactive HTML conversion services blended with interactive library of 100+ interactive components enabling clients to pick and choose best interactive components while placing a PSD to HTML conversion order. Some of our USPs include quick turnaround time, W3C validated end product, robust technological competency, 100 % money back guarantee like Email Monks, 100% hand coded HTML, multi-browser compatibility, clean and commended markups and comprehensive workflows.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks

WCAG

Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy