Written by 4:42 am jQuery, Showcase • 34 Comments

25+ Latest jQuery Plugins

105 Shares

25+ Latest jQuery plugins and scripts for web designers and developers. This post contains jQuery sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, image rotators, plugins for tabs, accordion menus, user interface elements, web contact forms, modal windows, tooltips, font size, and many other latest jQuery scripts collected in one place.

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 25+ Latest jQuery Plugins. Enjoy!

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

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 subscribe to our RSS-feed and Follow  us on  Twitter follow us on Twitter — for recent updates.

jQuery Flexible Font Size Plguin: FitText

fittext-jquery-plugin
FitText makes flexible font-sizes jQuery plugin for making sure a text fits into a defined element. Use this plugin on your fluid or responsive layout to achieve scalable headlinesthat fill the width of a parent element. It was made for headlines only, you shouldn’t use it on paragraph text.

It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser.

And, there are some options provided for a fine-tune including the ability to set “level of scaling” and mentioning min-max sizes.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

Website Font Resize jQuery Plugin: jFontSize

jfontsize-jquery-plugin

jFontSize is a jQuery plugin for integrating the popular ”A+ and A- buttons with the functionality of resizing text” into web pages.

This jQuery plugin  is also used to increase the accessibility of sites, helping people who have visual problems to see better content.

The buttons are actually inserted with standard HTML-CSS (so any type of buttons can be used) and the plugin controls the resize part.

It is possible to target a specific element (or the <body> for the whole page) and the resizing will be applied only to the contents of that element.

Also, various options can be configured like the “max-min number of resizes” and “how many pixels each command will resize”.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

CSS3 Transitions jQuery Image Slider: Flux Slider

css3-jquery-image-slider

CSS3 Transitions jQuery image slider “Flux Slider is an image slider using CSS3 transitions for creating smooth and  good looking 2D or 3D transitions slides.

It requires jQuery or Zepto.js, inspired from the transitions of Nivo Slider jQuery plugin and mimics them without using traditional JavaScript-timer-based animations.

Currently, there are 10+ transitions including Bars-Bars3D, Blinds-Blinds3D, Cube, Zip and more.

It can display a pagination and/or prev-next controls for browsing through the items.

Also, there are functions provided for auto-playing the slides and displaying captions with each.

jQuery image slider “Flux Slider”  can be controlled with custom events with its API as well.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: https://www.joelambert.co.uk/flux/transgallery.html

Demo Download

Free jQuery Content Slider: Diapo

jquery-content-slider

Diapo is a free jQuery plugin for creating content sliders with beautiful and custom transition effects (like curtain and mosaic).

It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that can also display thumbnails) or the auto-slideshow functionality.

Diapo jquery content slider is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work.

The plugin is mobile-ready and has options to enable-disable features for mobile usage.

Transitions can also be customized by defining sliced rows-columns, the transition period and more.

Requirements: jQuery, jQuery Mobile, Easing & HoverIntent plugins
Compatibility: All Modern Browsers

Demo Download

Awesome jQuery Content Slider: FlexSlider

flex-jquery-content-slider

FlexSlider is a lightweight (4kb minified) jQuery content slider plugin that is fully responsive, works great in any resolution and adapts itself nicely.

It uses unordered lists, any HTML content can be placed inside each <li>and they will be converted into slides.

Items can be browsed with the help of navigation buttons, keyboard or an auto-slideshow feature.

There are built-in animations offered for the transitions: fade and slide. And, it is possible to define the slide + duration speeds.

FlexSlider also has some options to improve usability like “pausing on action” or pausing on hover”.

jQuery FlexSlider Features:

  • imple, semantic markup
  • Supported in all major browsers
  • Slide and Fade animations
  • Highly customizable slider options
  • Directional, keyboard, and touch swipe navigation
  • Ultra Lightweight (4kb minified)
  • Use any html elements in the slides
  • Built for beginners and pros, alike
  • Free to use under the MIT license
Requirements: jQuery
Compatibility: All Major Browsers
Website: https://flex.madebymufffin.com/

Demo Download

jQuery Chop Slider: Animated jQuery Chop Slider, Zoom Slider, Bokeh Slider

jquery-html-content-slider

jQuery Chop Slider is the awesome animated jQuery slidertaht come with unlimited transition effects. Chop Slider uses full power of CSS3 animation. It has own CSS3 support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers. It allows you to be fuly creative and create your own transition effects.

jQuery Chop Slider Features:

  • Uses full power of CSS3 animation
  • Has own CSS3 support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers
  • Unlimited number of custom animated transitions. It allows you to be fuly creative and create your own transition effects
  • Lot of flexible settings to make your transition unique
  • Built in control navigation
  • Built in captions control
  • Autoplay feature
  • Ready to use with a HTML captions
  • Supports links for images (slides)
  • Lightweight. About 3Kb minified and gzipped
  • Easy to setup
  • Comes with some usefull functions for developers. They allow to make slider transitions a part of environment’s animation

Browsers Support:

Chop Slider has a lot of flexible settings to make your transition unique. It has built in control navigation and captions control. The file size is about 3Kb minified and gzipped. Chop Slider support for Internet Explorer v6+, Firefox v3+, Google Chrome v4+, Safari v4+ and Opera v10+.

Requirements: jQuery

Demo Download

Flux Slider With CSS3 Image Transactions

css3-image-transaction-jquery-slider

Flux slider with CSS3 image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin. Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

The aim is to use hardware acceleration where possible to improve performace on less powerful devices, such as mobiles & tablets.Flux requires a browser which supports CSS3 transformations and has been built to use either jQuery or Zepto.js as they share the same API. For mobile deploymentZepto is recommended due to its <5k deployment footprint.

Requirements: CSS3 Transformations Enable Browser

Demo Download

jQuery Content Slider With Thumbnails, Captions & Tooltips :Awkward Showcase

jquery-content-slider-thumb-caption-tooltip

Awkward Showcase is a very flexible jQuery content slider plugin with thumbnails, captions and tooltip that can display any type of HTML content.

The plugin only controls the functionality and design is completely created on the HTML-CSS side.

Slider can have thumbnails that are positioned vertically or horizontally, captions can be displayed for each item and multiple tooltips can be positioned over slides (to provide detailed info about a specific part of the slide).

It can auto-arrange the height according to the content displayed, has multiple transition effects, the interval between each slide can be changed and much more.

Requirements: jQuery
Compatibility: All Major Browsers
Website: https://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

Demo Download

jQuery Color Picker Plugin: ExColor

jquery-color-picker-plugin

jQuery color picker plugin ExColor  for enabling users to select colors from a Photoshop-like color picker. jQuery color picker plguin “ExColor” easdy to install on your website. It not only allows to choose the color you want. A design of plug-in can be easily edited with the settings. Simply connect to the page the script file and all.

It is attached to <input> fields and can be activated by simply calling a single-line function.

The color picker’s design is so flexible as every element used in the picker comes with 10 different design options to select from.

Also, a web-based editor helps choosing each design element, their colors and various other options to create a unique look.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

jQuery DropDown Menus: DropKick

jquery-drop-down-menu
DropKick use to creating custom dropdown menus is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation.

DropKick works by transforming your existing, boring <select> lists into beautiful, customizable HTML dropdowns. The name attribute is the only one that is required. You should also set a tabindex attribute to enable navigation via tabbing. When an option is selected in a DropKick menu, the corresponding <select> value is updated. This means that your forms and AJAX requests should work the same without having to make any changes.

FEATURES

  • Keyboard Navigation
  • Themeing
  • Custom Callbacks

Opened DropKick menus on Internet Explorer 7 will be covered by other DropKick containers if they are vertically stacked and too close together.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

Flexible jQuery Plugin For Overlays: Simple Overlay

flexible-jquery-overlay-plugin

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.  Simple Overlay flexible jquery plugin use for custom effectscustomize using CSS hooks,fade effect, slide effect or no effect, define custom callbacks for further action, take advantage of CSS3 and more.

There are high-quality plugins for creating overlays but most of them come with Lightbox or modal dialog capabilities and sometimes all we need is only the overlay.

The overlay can also be customized more by setting its color, opacity level, whether it’ll be removed with onClick and more.

Thanks to custom callbacks, any functions can be fired after onShow andonHide events.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

jQuery HTML5 File Uploader Lightweight jQuery Plguin

html5-jquery-uploader

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. You only need to create a dropbox element(i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

jQuery HTML5 upload function is divided into two asynchronous operations: client side, the file is loaded in the browser memory with a FileReader object. Useful if you want, for example, to show the image preview while uploading a picture. The server side operation consists in sending the binary file string to the postUrl.

It has been tested and works on Firefox and Chrome.

Requirements: jQuery

Demo Download

Tooltipsy: jQuery Tooltips Plugin For Control-Obsessed Designers

jquery-tooltip-plugin

Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips.

Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over theCSS, animation, and position.

It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.

There are also few settings like “the ability to aligning the tooltip according to the cursor or the element” and “its distance from them”.

Tooltipsy is very well-documented and a set of samples show the flexibility offered.

Requirements: jQuery
Compatibility: All Major Browsers
Website: https://tooltipsy.com/

Demo Download

OpenJS Grid – Easiest & Customizable jQuery Datagrid

customizable-jquery-datagrid

OpenJS Grid is the easiest & customizable jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries.

OpenJS Grid is a very easy-to-setup solution for displaying records as a user-friendly datagrid.

It comes as a plugin for jQuery with the PHP files for handling the Ajax requests and can be called with a simple/one-line function.

The data to be shown on the initial load can be limited to a desired number, rest of the records can be browsed with pagination and every column can be sorted.

And, there are many options like:

  • showing/hiding row numbers
  • inline editing
  • deletion of records
  • filtering records with date range

There are callbacks on every step (rowClick, loadComplete, saveFail, etc.) and the design of the grid can be totally changed with CSS3-powered theming support.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

Image Gallery For iPhone, iPad, Android, Blackberry & Touch Devices: PhotoSwipe

image-gallery-iphone-ipad-touch-devices

PhotoSwipe is a free and full-featured image gallery for mobile and touch devices. It is built with HTML, CSS + JavaScript and doesn’t depend on any frameworks.

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.

The interface is native-like and offers a similar experience with the ability of swiping items and support for orientation (also, resizes images automatically).

A “start” button can display the images as a slideshowand there are many options for customizing the gallery like the speed of fadeIn-fadeOut effects, enabling zoom, method of image scaling and much more.

PhotoSwipe works in iPhone, iPad, Android, Blackberry + desktop browsers and there is an optional jQuery implementation for the users of this framework.

Image Gallery For Mobile and Touch Devices

Requirements: No Requirements
Compatibility: All Major Mobile & Desktop Browsers

Demo Download

GMAP3 jQuery Plugin For Google Maps

jquery-plugin-for-google-map

GMAP3 is a jquery plugin which allows many manipulation of the google map API version 3. Inserting Google Maps into web pages is already easy with the simplicity Google offers in all of their products.

However, things can get easier with GMAP3 jQuery plugin if you are planning to use maps with advanced features (like overlays or callbacks).

There are simplified functions provided for the popular uses of Google Maps API that would normally require much more coding like:

  • getAddress – which returns a google.maps.GeocoderResult from agoogle.maps.LatLng
  • getRoute – which returns a google.maps.DirectionsResult from agoogle.maps.DirectionsRequest

It is also possible to use the native Google maps functions within the plugin for maximum flexibility.

Requirements: jQuery
Website: https://gmap3.net/

Demo Download

MotionCAPTCHA – Draw Shapes Captcha With jQuery

draw-shape-captcha-jquery-plugin

MotionCAPTCHA, a jQuery plugin, based on the HTML5 Canvas Harmony procedural drawing tool offers a different type of captcha byasking the users to  draw shape they see in the canvas in order to submit a form. It is not only different but also fun and can even be easier to-use for touch devices.

The project is currently a proof-of-concept considering the captcha is only verified on the client-side and can be manipulated. However, the next version is planned to have server-side and better browser support. Looking forward to it!

Compatibility: jQuery

Demo Download

Mosaiqy: jQuery plugin For Viewing and Zooming Photos

jquery-image-viewing-zooming-plugin

Mosaiqy is a jQuery plugin for viewing and zooming photos and images in a Mosaic-like grid interface.

The images are displayed inside randomly moving columns and rows where CSS3 transitions are used for the animations.

Once a thumbnail is clicked, the original version is loaded inside the gridwith a nice slideIn/Out effect.

retrieves images from a JSON/JSONP data source which makes integrating with image hosting services pretty easy and there are already demos for Flickr, Instagram and Panoramio.

Mosaiqy has multiple configuration options like the speed of transitions, delay between each, number of columns/rows, looping on/off and more.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

jQuery Tooltips Plugin Bubble-Shaped Tooltips With :Grumble.js

jquery-bubble-shape-tooltip-plugin

Grumble.js, a jQuery tooltip plugin by the developers of Huddle.com, enables us to create tooltips as bubble-shaped. 

The positioning  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 localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

Bubbles come from a sprite image and the plugin decides which image to use according to the size of the text.

Tooltips are displayed with a fadeIn/fadeOut effect, can be set to auto-disappear or stay visible until they are closed.

There are also callbacks on every levelonShowonBeginHide andonHide.

What is this magic?

grumble.js uses buzzwords like CSS3 and ‘maths’ to position itself exactly where you want it. Modern browsers use CSS3 transforms with IE6+ using non-standard Matrix filters. Image spriting is used for actual bubble image, you can change this as you want – it’s just CSS.

Demo Download

File Browser With PHP & jQuery: SFBrowser

jquery-file-browser-php-plugin

SFBrowser is an open source application, built with PHP and jQuery, for managing files online with an Ajaxed interface.

It returns a list of objects with containing the names and additional information of the selected files. You can use it, like any open-file-dialog, to select one or more files. Most inherent functionalities are also there like: file upload, file preview, creating folders and renaming or deleting files and folders.

The functionality can be extended with plugins. There are few ready-to-use ones like filetree and image-resize.

For a faster usage, there is a context menu and support for keyboard shortcuts.

It is a multilanguage application, new languages can be added by creating new localization files (English, Dutch or Spanish are already included).

And, SFBrowser comes with a JavaScript API to interact with many of its features.

P.S. It is also available as a WordPress plugin.

Requirements: PHP
Compatibility: All Major Browsers

Demo Download

jQuery Auto-Complete Input Field With jQuery Combogrid Plugin

jquery-auto-complete-inputfield-plugin

Combogrid is a jQuery plugin for adding advanced auto-complete functionality to input fields. 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 navigationsupport for selecting an item.

As the user types, it displays the list of possible results dynamically inside a paginated grid interface.

Requests are sent via Ajax and results are returned in JSON (or JSONP for cross-domain requests) datatype.

There are many options provided like the ability to setup alternate row colors, auto-choosing the result that matches the query, minimum length of the text before the grid is activated and more.

Requirements: jQuery
Compatibility: All Major Browsers
Website: https://combogrid.javaedintorni.it/

Demo Download

Kendo UI: Modern Framework for HTML5 UI

jquery-modern-framework-html5-UI

Kendo UI is a modern framework for HTML UI with the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package.

Modern framework rich, client UI widgets built on jQuery and designed to work across browsers and touchscreen devices. Everything you need for HTML5 UI in a single, compact package.

Framework Features:

  • Complete Framework for HTML5 apps
  • Ready for Touch & Mobile Devices
  • No more slow JavaScript
  • Rich UI built on jQuery
  • Broad browser support (even the old ones)
  • Professional tools, Professional support
  • Evolving at the speed of the web

Mobile Device Compatibility

Kendo UI is built to work seamlessly across desktop browsers and mobile touchscreen devices. Kendo UI offers full support for touch interactions and is tested against the following mobile platform browsers:

  • Android 2.x+
  • iOS 3.x+
  • BlackBerry OS 6.x+
  • webOS X.x+

Supported browsers

  • Internet Explorer 6+
  • Firefox 3+
  • Safari 4+
  • Chrome
  • Opera 10+

Requirement: jQuery

Demo Download

Ninja UI: jQuery Plugin To Create Beautiful Web Objects

jquery-ninja-UI-web-objects

Ninja UI is a jQuery plugin enabling you to create beautiful web interface objects efficiently and unobtrusively.

jQuery has lots of plugins and jQuery UI to improve its functionality in many ways.

Ninja UI is a plugin for the framework that brings new alternatives to them in a single package.

It includes widgets like buttons, accordion, icons, tooltips/modal box, slider, rating, tabs, auto-suggest and canvas-powered loader icon.

They are unobtrusive and the icons used actually come as a separate plugin that is in the form of web fonts.

Download Ninja UI jQuery Plguin

Requirements: jQuery
Compatibility: All Major Browsers
Website: https://ninjaui.com/

Demo Download

FOR MORE INSPIRATION

10 Useful jQuery Plugins For Designers

Post Thumbnail of 10 Useful jQuery Plugins For Designers

20 jQuery Plugins You Have To Know

Post Thumbnail of 20 jQuery Plugins You Have To Know

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

Post Thumbnail of jQuery Plugins - 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources

(Visited 242 times, 1 visits today)
Close
105 Shares
Share via
Copy link