介绍28个高质量的jQuery插件

13年前

There is always a new challenge for web designers and developers.

One of the latest is definitely responsive web design; the art of serving the same web page to multiple devices which look good on all of them.

Responsive Web Design

It is a getting-popular approach. As always, there are questioned parts (like the increasing number of screen sizes and the difficulty in setting breakpoints) but these are minor and creating a responsive website is nothing difficult.

Thanks to talented people out there that there are great resources simplifying development of such websites. Many tricky stuff can be handled easily with the right tools.

For jQuery users, there are a good number of responsive design plugins and here is a carefully collected and well-categorized list to bookmark and hit back when you are about to design responsively : ).

Layout & Tools

Response JS

The plugin has the mobile-first approach and enables us to dynamically arrange code blocks based on breakpoints + serve media progressively using HTML5 data attributes.

It also offers useful methods for easily testing screen properties that are important for creating responsive websites.

jquery responsive web

This plugin adds dynamic classes to the <body> depending on the operating system, browser and window size so that you can use a single CSS to change every aspect of your design.

When you resize the window, it automatically changes the window size related class. There are also two functions called, one on init, and the other on resize, so that you can make design manipulations accordingly.

breakpoints.js

Using this plugin you can define breakpoints for your design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

Heads-Up Grid

jQuery powered grid gives you chance to set different grid options including padding, columns, page-width (percentage or px), margins and gutter width. With it, you can define different grid experiences depending on the platform and/or window size.

jQuery Masonry

This is a dynamic grid layout plugin for jQuery. It differs from CSS floats, whereas floating arranges elements horizontally then vertically but Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

The result minimizes vertical gaps between elements of varying height.

Isotope

If you like jQuery Masonry, you will definitely love this. Isotope enhances what Masonry does, and adds filtering and sorting possibilities, as well as few more enhancements with the layout modes and animation engine.

scrolldeck.js

With this plugin, you can easily make responsive slideshow / presentation / landing page websites. It includes the nice simple animations that scrollorama provides.

FitText

The plugin makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

It is not advised for use on paragraphs, but its good-looking for headers especially with font-replacement.

Slideshows & Galleries

jQuery Responsive Thumbnail Gallery

The plugin allows us to define each image in 2 different sizes, just set a breakpoint width and it decides which image to display according to the size of the screen.

FlexSlider

This is a fully responsive jQuery slider plugin. It has a simple and semantic markup, supported in all major browsers, comes with various slide and fade animations, multiple slider support, callback API and hardware accelerated touch swipe support.

You can use any HTML elements in the slides.

Elastislide

Elastislide is a responsive jQuery image carousel that will adapt its size and behavior in order to work on any screen size.

Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. It uses the jQuery Touchwipe plugin to obtain the wipe event on mobile.

Responsive Image Gallery with Thumbnail Carousel

This plugin will help you create a responsive image gallery with an option to show or hide thumbnails.

There is also keyboard navigation and it also uses the jQuery Touchwipe Plugin to obtain the wipe event on mobile.

Dynamic Carousel

This is a dynamic carousel with sliding divs (with any content inside) that can adapt to any layout. Previous-next links, auto-advance, pagination and keyboard support are available.

wmuSlider

This is an easy-to-setup responsive image slider plugin. It has navigation and pagination controls, animations and touch support.

Blueberry

This resource uses unordered lists to generate a responsive image slider. It has pagination controls, animations and keyboard support.

supersized

As it is a fullscreen background slideshow, supersized is a responsive plugin by default. The latest version will help you create a very nice background for your responsive web page or a nice responsive powerful image gallery.

Photo Swipe

This is a jQuery Mobile plugin for creating image galleries specifically targeting mobile devices.

It provides an intuitive interface that makes it possible to interact with images on the mobile website. It can also be used as a stand-alone javascript library, aside from the jQuery implementation.

ResponsiveSlides.js

This is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions.

It automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.

Image Montage Grids & Effects

Automatic Image Montage

With this plugin you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

The last image of the montage can fill the left space, so that the montage will not have any white space in the end.

Seamless Responsive Photo Grid

In order to display multiple images getting them edge-to-edge on the browser window without any gaps you can use this plugin. All images can be of different sizes.

When resized, images will maintain their aspect ratio, while rearranging to fill the gaps.

Hoverizr

A tiny responsive jQuery plugin that outputs manipulated images on top (or below) of any targeted images and has 3 built-in effects: grayscale, blur and color inversion.

Navigation

TinyNav.js

This is a tiny jQuery plugin that converts your "navigations created with lists" into select dropdowns when browsed on small screens. It also automatically selects the current page and adds selected="selected" for that item.

Responsive-Menu

This is also a simple jQuery plugin to convert list-based navigations into a select element for mobile devices and low browser widths.

Lightbox

fancybox 2

The powerful fancyBox is a tool that offers a nice and elegant way overlay images, html content and multi-media on your webpages.

The new version is now responsive so that your lightboxes will resize with the browser and it is completely rewritten with new features and updated graphics.

P.S. It is only free for personal and/or non-commercial use.

rlightbox

rlightbox is a jQuery UI mediabox that can display many types of content such as images, 油Tube and Vimeo videos. It has unique features like Panorama and live re-size.

Like other jQuery UI widgets, it is ThemeRoller ready. The plugin can adapt to browser size, and it is great for responsive design.