45 Fresh jQuery Plugins and Tutorials

Advertisement

jQuery is the most accepted and most extensively used JavaScript frameworks among all the available JavaScript frameworks; and in this post we are featuring a gathering of electrifying and breathtaking jQuery plugins for your use. jQuery is widely used for the reason that it embraces event management, animation and Ajax interactions intended for an enhanced web development. JavaScript has turn out to be a no-brainer even for a novice just owing to the jQuery.

jQuery Plugins and Tutorials

In this summary, we have composed 45 Fresh & most helpful jQuery comprehensive tutorials and techniques that will facilitate you bettering the communication with your clientele and prospect customers through web portals. You can make use of these plugins to put in fine-looking effects and functionality in your next project. These plugins will also facilitate you in finishing your task effortlessly and they are good for mobile web development  and mobile analytics as well. Enjoy

jQuery MB Bgnd Gallery

( Demo | Download )
With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can either navigate the gallery with your keyboard or with a control panel displayed where you whant in the page.

Spin.js

( Demo | Download )
spin.js is an animated CSS3 loading spinner. You can adjust every single parameter: number of lines, length and width of lines, radius, trail, speed of spinning, and whether there’s a shadow or not.

jTable

( Demo | Download )
jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript. It has several amazing features.

colResizable

( Demo | Download )
colResizable is a jQuery plugin designed to enhance any kind of HTML table object adding column resizing features by dragging column anchors manually. It is tiny in size (2.8kb) and it doesn´t require any other library dependencies such as jQuery-UI or others.

Tipped, jQuery Tooltips

( Demo | Download )
Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips.

xhEditor

( Demo | Download )
This plugin allows you to easily create Good looking and modern rich editor.

Html5 Canvas Preloader

( Demo | Download )
Now you can preload your HTML 5 page with this nice jQuery plugin, passing data via JSON. You can customize it changing colors and style. It can preload video, audio, images and js.

jQuery keyboard

( Demo | Download )
A virtual keyboard for touchscreen terminals. This plugin takes a keyboard “definition” and generate it. Some special events are triggered when user interacts with it.

Asketic Swipe Gallery

( Demo | Download )
Asketic Swipe Gallery is a lightweight plugin, which allows to display and manipulate with images similary to iPhone/iPad image browser – it supports swipe, scale, cycle, resize & wide range of other functions.

Minimit Gallery

( Demo | Download )
Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

Diapo

( Demo | Download )
Diapo is a free and open source jQuery slideshow plugin. You can suggest changes or improvements if you want. You can download it and use for free.

ComboGrid

( Demo | Download )
Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item.

MotionCAPTCHA

( Demo | Download )
MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas. It allows users to draw the shape what they see in the canvas in order to submit a form.

Xml Driven Vertical News Scroller Script Using html and jQuery vScroller

( Demo | Download )
Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.

Cuepoint JS

( Demo | Download )
Cuepoint.js is an open source plugin for adding subtitles to your HTML5 video. You’re free to use it for whatever you want.

SmartGallery

( Demo | Download )
SmartGallery is an interactive image gallery that is specifically designed to support huge data. It is lightweight, lightening fast and fully customizable. Powered by jQuery, SmartGallery comes with twelve transition effects including some unique transition effect and thumbnail navigation.

Gmap3

( Demo | Download )
Gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.

HTML5 File Uploads with jQuery

( Demo | Download )
It will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

jQuery PointPoint – A Plugin For Pointing To Things

( Demo | Download )
This jQuery plugin will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

Skitter

( Demo | Download )
Skitter is a plugin for creating great-looking slideshows. You can customize every aspect of your slideshow.

Mosaiqy

( Demo | Download )
Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.

Zoomify, Explore Your Images

( Demo | Download )
If you have large images and you want to let people explore them you can use this tool; it adds zoom-in zoom-out and pan functionality; it has configurable magnification level and it provides built-in image preloading.

jQuery Widget

( Demo | Download )
jqxWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time.

Craftyslide

( Demo | Download )
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different by providing a simple, no-frills method of displaying images packaged into a small, clean and efficient plugin.

jmFullWall

( Demo | Download )
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

FlexSlider

( Demo | Download )
FlexSlider is an awesome, fully responsive jQuery slider plugin. It has simple, semantic markup, slide and fade animations, and is supported in all major browsers so you won’t have any compatibility issues. Flexslider is built for beginners and pros alike.

Wave Display Effect with jQuery

( Demo | Download )
How cool is it to sometimes just display content a little bit differently? This plugin let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.

Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )
In this tutorial Codrops want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

PikaChoose

( Demo | Download )
PikaChoose is a lightweight jQuery Slideshow plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed, easy to setup, and well… all around easy, and if you need help, I can install PikaChoose on your website for you. See details on the install page.

Blueberry

( Demo | Download )
Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Circular Content Carousel

( Demo | Download )
Circular Content Carousel is a jQuery carousel that has content boxes that you can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Dynamic Carousel

( Demo | Download )
Dynamic Carousel is a dynamic content slider and carousel, as the name implies. The way it’s dynamic is it uses percentages instead of pixel values, so it can be easily used on a responsive/flexible layout.

Overscroll

( Demo | Download )
Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. OverScroll runs best on Safari 5+, Chrome 5+, and Firefox 3+ but should run just fine on most modern browsers.

PhotoSwipe

( Demo | Download )
PhotoSwipe is a jQuery image gallery that specifically targets mobile devices.

Mobiscroll

( Demo | Download )
Mobiscroll is a wheel scroller user control optimized for touchscreens to easily enter date and/or time. The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list). It is designed to be used on touch devices as an alternative to the jQuery UI date picker.

Touchy Boilerplate

( Demo | Download )
Touchy is a mobile boilerplate that goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more.

jQuery.fracs

( Demo | Download )

Grumble.js

( Demo | Download )
grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

Timelinr

( Demo | Download )
Timelinr is a simple jQuery plugin that helps you to give more life to boring timelines. It supports horizontal and vertical layouts, and you can parameterize the majority of attributes: speed, transparency, etc.

Elycharts

( Demo | Download )
Elycharts is a pure JavaScript charting library, easy to use and completely customizable. It helps you create good looking interactive charts on you web pages or web applications, with a lot of useful features: legend and label support, mouse tracking, tooltips, templates, animations, and more.

Flexible Nav

( Demo | Download )
Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article, or just any web page.

Deck.js

( Demo | Download )
deck.js is a tool for making modern HTML presentations. Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state looks like and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don’t.

Simple Overlay

( Demo | Download )
Simple Overlay is a jQuery plugin for easily adding lightweight, flexible overlays to your projects. Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.

leanModal

( Demo | Download )
A super simple plugin that works with your CSS.

Ninja UI

( Demo | Download )
A jQuery plugin enabling beautiful web interface objects efficiently and unobtrusively.

Blogger from UK. A person that really likes technology, design, photography and web design. He is the New Owner of Web Design Burn & Founder of Lava360. Following WDB on Twitter.

Interesting News From