Post pobrano z: 28 High-Quality jQuery Plugins For Building Responsive Websites
Advertise here with BSA
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.
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
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.
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.
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.
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.
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.
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.
With this plugin, you can easily make responsive slideshow / presentation / landing page websites. It includes the nice simple animations that scrollorama provides.
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
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.
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 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.
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.
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.
This is an easy-to-setup responsive image slider plugin. It has navigation and pagination controls, animations and touch support.
This resource uses unordered lists to generate a responsive image slider. It has pagination controls, animations and keyboard support.
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.
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.
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
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.
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.
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
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.
This is also a simple jQuery plugin to convert list-based navigations into a select element for mobile devices and low browser widths.
Lightbox
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 is a jQuery UI mediabox that can display many types of content such as images, YouTube 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.
Adaptive media
.gif)
This is a lightweight anf easy-to-use jQuery plugin for fluid width video embeds.
Its power lies in its ability to automate the "Intrinsic Ratio Method" by Thierry Koblentz to achieve fluid width videos in your responsive web design without black spaces anywhere around the video.
This plugin dynamically updates the src of your images based on the browser width by using a defined set of breakpoints.
You can resize images on the fly or simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.
Adaptive Images detects your visitor's screen size and automatically creates, caches + delivers device appropriate re-scaled versions of your web page's embedded images.
In order to do that it uses a PHP and .htaccess file with a cache-folder on your server.
Author: Devrim Vardar
Devrim Vardar is a talented web developer who also writes fiction and non-fiction besides code.
He can be found at Stild.com and via Twitter.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
