jQuery is in almost every modern website and there’s a good reason for that. jQuery plugins are used by web designers to give a smoother experience to websites’ visitors.
Besides functions that will improve user experience, jQuery is also used for making a website look cooler. An easy way to do that is by using animation libraries.
Animation is just a small thing that jQuery can help you with when creating a website. Think of it this way: whenever you are designing a website, you can stop limiting yourself when it comes to creativity. If you are uncertain if a certain feature can be implemented, search for a jQuery plugin. There is surely one that can do what you desire.
In this article you will see useful jQuery plugins that will help you make your website look better and improve its user experience. Most of the plugins that you will see will refer to the latter. We’re focusing our attention on UX and you should too. A pretty site is useless if its visitors can’t use it with ease.
Skippr
datedropper
datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.
Responsify.js
When images are used in a responsive container on web design, because of the container can change to any width:height ratio, a group shot could end up being cut off on people’s faces, a nice photograph following “rule of third” could end up with no object in view.
Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.
Restive.JS
Restive.JS is a JQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device.
Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.
laroux.js
This project is a jQuery substitute for modern browsers and mobile devices. But instead of offering some wrappers and own dynamics, it simply provides helper functions to achieve the same objectives as jQuery or Zepto.
Even though keeping compactness is the primary concern of this library, it does contain lightweight versions of some concepts/components, including MVC.
FixedContent.js
A mobile-friendly, jQuery plugin that persists content (sidebar, nav, etc.) while scrolling.
Simple Lightbox
Touch-friendly image lightbox for mobile and desktop with jQuery
jQuery Nice Select
A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.
jQuery Mapael
jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.
For example, with Mapael, you can display a map of the world with clickable countries. You can also build simple dataviz by setting some parameters in order to automatically set a color depending on a value to each area of your map and display the associated legend.
Moreover, you can plot cities on the map with circles, squares or images by their latitude and longitude. Many more options are available, read the documentation in order to get a complete overview of mapael abilities.
Submitter: A simple jQuery form submitting plugin
A jQuery Plugin For Adding Facebook Login To Your Web App
If you are looking for angular-fblogin you’re in the right place. Even though this demo uses the jQuery version of fblogin, it is still applicable since both versions use a similar implementation.
Readable
Introducing Readable, a jQuery plugin to help you create optimally sized paragraphs for maximum readability.
It conveniently marks the 45th and 75th character of every paragraph tag when turned on. Your paragraph line breaks should fall somewhere in between those two numbers. If that’s not happening, then you’ve got some tweaking to do.
jQuery lightgallery
lightGallery uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use.
Lightgallery supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag.
Chocolat.js
Chocolat.js enables you to display one or several images staying on the same page.
The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.
The viewer may appears full-page or in a block.
Cropper: A simple jQuery image cropping plugin
jquerymy.js
jQuery.my is a plugin for real time two-way data binding. It mutates object given as a data source, reflecting interactions between user and UI.
jQuery FocusPoint
Websites don’t have a single layout any more. The space you have for an image may be portrait on a laptop, landscape on a tablet, and square on a mobile – particularly if you’re using a full-screen image.
If you have to use the same image file in all these contexts, you might not be happy with the results you get when you ‘fill’ the allocated space with your image. Your subject might be clipped or completely missing, or just really awkward looking.
FocusPoint makes sure your image looks great in any container, by ensuring the ‘spare’ parts of your image (negative space) are cropped out before the important parts.
Simple jQuery/CSS3 slider
A simple slider that does what a simple slider has to do: slide slides! The slider has been developed with the idea to provide a slider that can be used in all your projects. It provides you with the basic features you need from a slider.
jquery.matchHeight
matchHeight makes the height of all selected elements exactly equal. It handles many edge cases that cause similar plugins to fail.
Vide: Easy as hell jQuery plugin for video backgrounds
jBox
jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.
Midnight.js lets you switch fixed headers on the fly
A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.
Vivus, bringing your SVGs to life
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.
Chartist – Simple responsive charts
Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:
- not responsive
- use the wrong technologies for illustration (canvas)
- are not flexible enough while keeping the configuration simple
- are not friendly to your own code
- are not friendly to designers
- have unnecessary dependencies to monolithic libraries
- more annoying things
Animsition
A simple and easy jQuery plugin for CSS animated page transitions.
InstantClick
InstantClick is a JavaScript library that dramatically speeds up your website, making navigation effectively instant in most cases.
wysiwyg.js
‘wysiwyg.js’ is a (uglified) 12k contenteditable-editor with no dependencies.
It does only:
- Transforms any HTML-element into contenteditable
- onSelection-event: e.g. to open a toolbar
- onKeyDown/Press/Up-events: e.g. to handle hotkeys
- onPlaceholder-event: show/hide a placeholder
- handle popups
- .bold(), .forecolor(), .inserthtml(), … functions
Unite Gallery
The Unite Gallery is multipurpose javascript gallery based on jquery library. It’s built with a modular technique with a lot of accent of ease of use and customization. It’s very easy to customize the gallery, changing it’s skin via css, and even writing your own theme.
Yet this gallery is very powerful, fast and has the most of nowadays must have features like responsiveness, touch enabled and even zoom feature, it’s unique effect.
jQuery.Simple-Event-Calendar
jQuery.Simple-EventCalendar make it easier for you to create an event calendar, datepicker or whatever you want with jquery
OKZoom
OKZoom is a JQuery plugin that produces a portable loupe of variable size and shape. All other jQuery ‘zoom’ plugins we have encountered implement a square magnifying area. Ours is a circle. You want a circle.
jQuery Scrollify – Power steering for your scroll wheel
A jQuery plugin that assists scrolling and snaps to sections. Touch optimized.
SweetAlert
ScrollUpBar Plugin
The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It’s specially useful on mobile interfaces to save some precious space.
jQuery Sidebar 3.0.0
Tipso – A Lightweight Responsive jQuery Tooltip Plugin
Oh Snap! – A simple notification jQuery/Zepto library designed to be used in mobile apps
Material Design Preloader
Jquery Youtube Background Video
FilmRoll: jQuery Carousel
FilmRoll is a lightweight jQuery carousel (12 kb minified) that focuses on one item at a time, centering it in the view, regardless of the relative sizes of the carousel items.
jQuery FancyIndex Plugin
Nowadays almost every “fresh” page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.
Dropper: A jQuery plugin for simple drag and drop uploads
Flip – A jQuery plugin to flip content with 3D animation
jQuery finger
jQuery Finger unifies click and touch events by removing the 300ms delay on touch devices.
It also provides a common set of events to handle basic gestures such as press, double tap and drag. Very small (< 0.5kb gzipped), it is focused on performance, is well tested and also supports jQuery delegated events.
Slippry – A responsive slider
Justified.js – jQuery Plugin to create Justified Image Gallery
Justified.js is a jQuery plugin that creates a justified image grid of supplied images. Fill all the spaces! This ineffect creates a elegant image gallery with various sizes of images, where all the images of a row to have the same height.
Ideally, Justified.js tries to show images without modifying its aspect ratio and without cropping them. But want a disposition of the images without cropping them. But, when limited by the maximum row size it sometimes crop images to fill the grid.
pagePiling.js
ItemSlide.js – jQuery plugin for a touch carousel
Gridstack.js – jQuery plugin for widget layout
gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts. It also works great with knockout.js and touch devices.
Source: http://ift.tt/1wdApBl
No comments:
Post a Comment