There are some cases that you will find media queries not powerful enough to handle the optimization of responsive website – and so the help of jQuery plugins for building responsive layouts are in need. The optimization of other web elements such as navigation, image sliders, font size, image gallery and other elements that are part of your layout are required especially if you are building powerful responsive web design.
Here’s a collection of jQuery plugins for building responsive layouts or responsive web design to help you create multiple device-friendly websites. There is also, of course, a lot of mobile frameworks to develop multi-platform apps which will help you to do the same thing. As long as you come up with the benefits of making the experience of web browsing more exciting, then you can use any of these tools.
Responsive Image Gallery with Thumbnail Carousel
Using the Elastislide plugin (above), this tecnique will show you how to implement a responsive gallery that adapts to the view-port width. The gallery will has a view switch that allows you to view it with the thumbnail carousel or without. It also supports keyboard navigation.
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/”]
Response JS: Progressive Enhancement in HTML5
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images progressively via HTML5 data attributes.
[action-button title=”View Source” url=”http://responsejs.com/”]
FitText – A Plugin for Inflating Web Type
FitText 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.
[action-button title=”View Source” url=”http://fittextjs.com/”]
Supersized – Full Screen Background Slideshow jQuery
Supersized is a fullscreen background slideshow built using the jQuery library – a project by Sam Dunn of One Mighty Roar.
[action-button title=”View Source” url=”http://buildinternet.com/project/supersized/”]
[action-button title=”View Source” url=”http://www.photoswipe.com/”]
ResponsiveSlides.js – Responsive jQuery Slider & Slideshow
ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.
- [action-button title=”View Source” url=”http://responsive-slides.viljamis.com/”]
The Heads-Up Grid
[action-button title=”View Source” url=”http://bohemianalps.com/tools/grid/”]
Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, 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, just like a mason fitting stones in a wall.
[action-button title=”View Source” url=”http://masonry.desandro.com/”]
Intended to be a proof of concept, Doubletake is a plugin that dynamically updates the src of your images based on the browser width. You start with a small, mobile-friendly image in your HTML. Doubletake will then use a defined set of breakpoints to update image SRCs when necessary.
[action-button title=”View Source” url=”http://www.grahambird.co.uk/lab/doubletake/”]
rlightbox – a jQuery UI Mediabox
rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.
[action-button title=”View Source” url=”http://ryrych.github.com/rlightbox2/”]
Blueberry – Responsive jQuery Image Slider
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
[action-button title=”View Source” url=”http://marktyrrell.com/labs/blueberry/”]
FitVids.JS – jQuery Plugin for Fluid Width Video Embeds
FitVids.JS is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
[action-button title=”View Source” url=”http://fitvidsjs.com/”]
Hoverizr – A Responsive jQuery Image Manipulation
Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion.
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/08/30/automatic-image-montage/”]
Elastislide – A Responsive jQuery Carousel Plugin
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/”]
Adaptive Images in HTML
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.
[action-button title=”View Source” url=”http://adaptive-images.com/”]