10 Useful jQuery Plugins For Designers

jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you. Here are 10 useful jQuery plugins for designers.

In this post you can fine 10 Useful jQuery Plugins. Enjoy!

You may be interested in the following modern trends related articles as well.

• 20 jQuery Plugins You Have To Know
  
• jQuery Plugins – 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources
  
• Amazing Standalone Image Slider With Awesome Effects
• Related Posts Slide Out Boxes Menu with jQuery and CSS3
• Catch404 – jQuery Plugin For Handling Broken Links Smartly
• Full Page Background Image Navigation (Slide Effect) with jQuery
• Download jQuery MegaMenu 2 Plugin
• jQuery Validity Elegant and Powerful jQuery Plugin

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to  subscribe to our RSS-feed and  follow us on Twitter — for recent updates.

jQuery Zoom Hover Effect Plugin: SWISH

Swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s. With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes).

This plugin is easy to customized. You can adjust all the settings it comes with that you can find on refer to usage page in the index.html header.

It’s really simple to setup, if you get into any trouble with it do let me know and I’ll do my best to help you out.

Download jQuery Zoom Hover Effect Plugin

Requirements: jQuery
Demo:https://thefinishedbox.com/files/freebies/hoverzoom/index.html
Download:https://thefinishedbox.com/?download=hoverzoom

Flexible jQuery Navigation Model Plugin For Web Apps: Kaiten

Kaiten flexible jQuery navigation model plugin for web apps for creating a flexible, simplistic andpowerful browsing experience.

It helps quickly-building a column-based interface where each column can be a part of a sequence (like a breadcrumb navigation) and resized by the end-user.

The interface auto-arranges itself according to the browser-width by changing the number of the columns displayed. Simply, it will perform nicely on mobile and tablet browsers.

Kaiten can be extended very easily with its API. The plugin is also well-documented and comes with a demo that shows its features.

The plugin is included in a new web app platform named Officity and in alpha stage (yet very promising).

Download jQuery Navigation Model Plugin For Web App

Requirements: jQuery
Compatibility: All Major Browsers
Website:https://www.officity.com/kaiten/
Demo:https://www.kaitenbrowser.com/
Download:https://www.officity.com/kaiten/download/

jCanvas: A jQuery Plugin For Manipulation HTML5 canvas

jCanvas is a plugin for jQuery that simplifies using HTML5 canvas with various methods offered.

There are many ready-to-go shapes like rectangles, ellipses or arcs and methods for using images or text.

It is possible to define the dimensions of the canvas, where the drawing will start from (x, y) and much more.

For styling, colors can be mentioned as names, HEX, RGB or RGBA, and gradients or patterns can be used.

The plugin is being improved and new features are improved frequently.

Download jCanvas jQuery Plugin

Requirements: jQuery 1.4+
Compatibility: All Modern Browsers
Website:https://calebevans.me/projects/jcanvas/
Demo:https://calebevans.me/projects/jcanvas/sandbox.html
Download:https://calebevans.me/projects/jcanvas/download.html

Microjs: Fantastic Micro-Frameworks and Micro-Libraries All In One Place

We generally use one of the popular JavaScript frameworks like jQuery, YUI, MooTools or Prototype for web projects even if the project only needs a very small part of the functionality. Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Such a usage ends up in bigger-sized web pages although it can be prevented easily by using “to-the-point” micro frameworks.

Microjs is a website which is a directory of such tiny (<5kb) JavaScript libraries and frameworks.

From a list of options, you can select the feature you need like: a base framework, CSS animation, data manipulation, etc. and it’ll present you the resources that can meet your requirements.

Although getting used to new frameworks may seem like a “loss of time”, it’ll probably pay back in load times (specially for the mobile).

Website:https://microjs.com/

G5: HTML5 Front End Development Framework

G5 is a framework for building PHP-powered HTML5 websites which makes use of such popular resources (like Modernizr, jQuery, CSS3 Pie, etc.).  G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

Being an active member of the web design community, this framework is a result of a ton of reading and research. For over a year the framework was constantly changed, simplified, and updated with current best practices. The framework is very lightweight and only includes what I believe are the essentials.

It has many features like:

• robots.txt / robots meta for the search engines
• GZip for faster page load
• preventing CSS caching
• sticky footer
• always forcing latest IE rendering engine (even in intranet) & Chrome Frame
• smooth scroll-to-top
• shorthand CSS / some basic reusable classes
• and more..

The design has a 940px total content width and in “F” shape by default but can be updated in anyway desired.

Also, G5 includes widely-used items like an image slider (Orbit), tool tips (Tipsy) and modal boxes (Reveal).

Download G5 HTML5 Framework

Requirements: PHP
Compatibility: All Major Browsers
Website:https://framework.gregbabula.info/

Add Retro & Vintage Style To Images :vintageJS

Although images are usually expected to be static elements, customizing them on the client-side (via JavaScript) can be very handy considering the ability to applying effects and changing them anytime while still keeping the original files. add some awesome retro and vintage style to your images with the HTML5 canvas element.

vintageJS is a jQuery plugin that uses the HTML5 <canvas>element foradding a retro feel to images.

It has 3 ready-to-use effects (sepia, green, grayscale) and can be customized very easily by creating new presets with values like vignette, noise, desaturate, viewfinder and more.

The website of the resource also has a web-based editor for applying these effects any image instantly and downloading them.

Download vintageJS jQuery Plugin

Requirements: All Modern Browsers
Website:https://vintagejs.com/
Download:https://github.com/rendro/vintageJS

Download jQuery In Place Editor Plugin

jQuery In-Place Editor is a jQuery plugin that turns any element or group of elements into an Ajax in-place editorusing only one line of code. It’s written using the jQuery Library, which is available free at https://jquery.com. I saw this on Flickr a while back and I thought it was really great how you can update the title and description of a photo without having to go to an admin page.

Another In-Place Editor allow us to create in-place editor for Standard Text box, Text area and Select Dropdown.

Some Features

• Esc key will cancel an active editor
• On blur will by default cause the editor to submit the value to the server. This can be overridden to cancel the submission.
• Submit to a callback function to handle the in-place submission, rather than submitting to a URL
• Optional validation of a blank field; By default if the field is blank, the form won’t submit and the user will receive an alert

These are only a few of the parameters that can be passed into the editor. But It’s highly customizable. Once the in-place editor form is submitted, it sends a POST request to the URL that is specified in the editor’s parameters along with three form fields:

• original_html; the original text in the in-place editor container
• update_value; the new value of the text from the in-place editor
• element_id; the id attribute of the in-place editor

Download jQuery In PLace Editor Plugin

Requirement: jQuery
Demo:https://jquery-in-place-editor.googlecode.com/svn/trunk/demo/index.html
Download: https://code.google.com/p/jquery-in-place-editor/downloads/list
Website: https://code.google.com/p/jquery-in-place-editor/

Javascript SlideShow Plugin, Highly-Flexible jQuery Slideshow Plugin: Agile Carousel

Agile Carousel is a jQuery plugin that allows us to create flexible (both in function and design) slideshows.

The plugin uses JSON for the data format of the slides. So, they can easily be provided remotely and integration with any other system (like CMSs) will be easier.

You can select between ”fade” or “slide” as the transition effect, duration of the transitions and intervals between each slide can all be defined.

Highly Flexible so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup.

Agile Carousel jQuery Slideshow have 5 different flavors and styles.

• Basic Slideshow
• Multiple Slide Visible
• Flavor 1 with Prev, Next Buttons & Numbering
• Flavor 2 with Horizontal “Content Buttons” Triggered on Mouseover, Prev, Next, Play, Pause Buttons  & Numbering
• Flavor 2 with Vertical “Content Buttons”

Slides can be set to be displayed with an “infinite scrolling” interface, navigation can be accomplished by “numbered buttons”, “prev-next buttons” or any custom control.

With a simple function, it is also possible to get the total number of slides and the “current” slide displayed which would be handy when customizing it.

P.S. The plugin was previously shared at WRD, however, this is a totally re-written version and the old URLs are no longer available.

Download jQuery Slideshow Plugin

Requirements: jQuery
Compatibility: All Modern Browsers
Website:https://www.agilecarousel.com/
Download:https://github.com/edtalmadge/Agile-Carousel

jQuery Alert Alternative: Apprise

A jQuery alert alternative that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Apprise was created by me (Daniel Raftery), a web developer, located in Portland, Maine. Apprise was a simple project that I felt compelled enough to develop to the point of distribution. Feel free to manipulate, improve upon, and use however you’d like.

The stylesheet (apprise.css) is the key everything; simply edit the styles declared within to adjust the look and feel. Because this is actually injecting elements into the DOM, you want to make sure you close all tags as these can cause apprise to fail and give you an unnecessary headache.Apprise is tiny. Like, really tiny. 5kb in total for the full and 3kb for the minified version.

Download jQuery Alert Alternative: Apprise

Requirements: jQuery Framework
Demo:https://thrivingkings.com/apprise/
Download: https://cl.ly/682c
Website: https://thrivingkings.com/apprise/

jQuery Slideshow Plugin With Flexible Animations: Skitter

Skitter is a jQuery plugin that enables us to convert unordered lists into slideshows with attractive animations.

The slideshow can display the list of slides as numbers or thumbnails and items can be browsed with the help of prev-next buttons as well.

It has many original animation types including cube (with various sub-types), tube, block and more.

There are several options offered for maximum customization like: velocity (for the animation particles), interval between each slide or label display on/off.

Another nice feature is the ability to mention the animation type for each slide as a class name which allows us to use multiple animation types inside one slideshow.

Download jQuery Slideshow Plugin: Skitter

Requirements: jQuery
Compatibility: All Major Browsers
Download: https://github.com/thiagosf/SkitterSlideshow
Website: https://thiagosf.net/projects/jquery/skitter/

FOR MORE INSPIRATION

10 Useful jQuery Plugins For Designers

20 jQuery Plugins You Have To Know

jQuery Plugins – 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources

Related Posts Slide Out Boxes Menu with jQuery and CSS3

Catch404 – jQuery Plugin For Handling Broken Links Smartly

75+ jQuery Plugins: Download Powerful and Elegent jQuery Plugins & Tutorials