25 jQuery Plugins to help with Responsive Layouts

The most important topic of discussion is some importants jquery plugins which will hep in responsive layout allow you to offer optimized screen size based on device as well as desktop version.

You can make basic responsive by Media Queries but what’s for some different features like Navigation, forms, images, sliders etc.

We are highlighting some popular jquery plugins which will help in responsive optimization.

1) Response.js
It’s an experimental jquery plugin to create a website with responsive by swap content based on screen size and data attributes.
http://responsejs.com/

2) Responsly
It’s a responsive widget jquery plugins written using CSS3 transformations. Currently it’s provide a slideshow and accordion funtionality only.
http://dmmalam.github.io/Responsly.js/

3) Menu to DropDown
With help of this jquery plugin, you can recreate dropdown menu for small screens responsive design.
https://css-tricks.com/examples/ConvertMenuToDropdown/

4) Responsive Menu
It’s a simple jquery plugin which convert your menus to select element for mobiie resolution.
http://mattkersley.com/demos/responsive_menu/

5) Doubletake
This plugin is mainly used for reponsive images. Based on breakpoints of screen, it will update images src when required.
https://github.com/filamentgroup/Responsive-Images

6) FitText
It makes font size flexible. You can achieve scalable headlines in responsive layout that fill the width of a parent element.
http://fittextjs.com/

7) Breakpoints.js
It defines breakpoints for any responsive design. It wil fire custom event when browser enters or exit that breakpoint.
http://xoxco.com/projects/code/breakpoints/

8) Elastislide
It’s a responsive image carousel which is work in any screen size. It will make container smaller which will solve problem for smaller screen.
http://tympanus.net/Development/Elastislide/

9) Blueberry
Blueberry is best open source jquery image slider plugin which will fit in responsive web layouts.
http://marktyrrell.com/labs/blueberry/

10) Wmuslider
You can make responsive slider by Wmuslider. You can manage navigation, pagination, animation with touch support.
http://brice.lechatellier.com/code-design/wmuslider/

11) PhotoSwipe
It’s Javascript gallery specially for mobile and touch devices as well as for desktop version.
http://photoswipe.com/

12) Flexslider
It’s a fully responsive slider plugin with slide and flade animation, is supported by major browser.
http://www.woothemes.com/flexslider/

13) Responsive jQuery Slideshow
Fluid jQuery slideshow which scales responsively.
http://blog.kiskolabs.com/post/5602656614/responsive-jquery-slideshow

14) Seamless Responsive Photo Grid
https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/

15) Responsive Image gallery with Thumbnail Carousel
It will create a responsive image gallery with thumbnail carousel using elastislide. You can navigate by keyboard also.
http://tympanus.net/Tutorials/ResponsiveImageGallery/

16) rlightbox
rlightbox is a jquery UI mediabox by which you can display many types of contents like images, video. It ‘s provide a features like Panorama and Live Re-size.
http://ryrych.github.io/rlightbox2/

17) AdaptiveMedia
You can create multiple images as per different scren sizes because desktop version images will takes time in mobile version.
http://www.yusufakyol.com/adaptivemedia/bordered.html

18) Dynamic Carousel
It’s carousel plugin for responsive layouts.
https://github.com/Wilto/Dynamic-Carousel/

19) FitVids.js
It’s easy to use jquery plugin for responsive width video embed.
http://fitvidsjs.com/

20) Isotope
It’s good plugin for dynamic layout which you can’t achieve with only css. You can hide and show item elements easily with jquery selector and re-order elements with sorting.
http://isotope.metafizzy.co/index.html

21) Heads-Up Grid
It’s an overlay grid for in-browser website development.
http://bohemianalps.com/tools/grid/

22) TinyNav.js
It’s a small plugin which will convert UL and OL navigations to a dropdown box for small screen layouts. It will select the current page and add selected tag for that item.
http://tinynav.viljamis.com/

23) Scrolldeck.js
With help of this plugin, you can create responsive slideslow, any attactive presentation and landing page for your website.
http://johnpolacek.github.io/scrolldeck.js/

24) TouchCarousel
it’s a mobile friendly content scroller with touch navigation. We can also use it as carousel, banner rotator and gallery.
http://dimsemenov.com/plugins/touchcarousel/

25) SwipeJS
It’s a most preferable touch slider with resistant bounds, scroll preventation, resize adjustment.
https://github.com/thebird/swipe

Author: Harshal Shah

Harshal Shah is CEO & Founder of Xhtmljunkies, Located in Gujarat, India, XHTML Junkies is one of the best companies that offer unique eCommerce solutions by the virtue of its dedicated professionals. Our professionals are extremely proficient in offering development services pertaining to eCommerce. You can find Harshal on Google+ and Twitter.