jQuery Plugins for Responsive Web Design | Designpin | featured image

jQuery Plugins for Responsive Web Design

Most probably you are familiar with the news that jQuery released a stable version of JavaScript library, that is 1.9.0 on January 15th, and approximately at the same time was released 2.0 beta version for testing. With this news came an idea to devote some time for jQuery library and some available plug-ins in the context of responsive web design.

 

As you could see recently we have devoted quite some time to the concept of responsive web design and various aspects of designing a site in this way. We have talked about frameworks and our most recent post has been a small wandering off the topic but now we’re beck to responsive web design.

 

Thanks to the architecture of jQuery JavaScript library many developers may and are creating hundreds of plug-ins that extend the functionality of this library. Among thousands of jQuery plug-ins we wanted to pick those that would be most suitable for responsive web design.

 

Like in most articles the italics stand for the developers’ notes.

 

1. Photo Swipe

It is free image gallery based on HTML/CSS/JavaScript. It is mainly designed and aimed towards mobile devices. It is also mainly addressed towards designers and developers who need an interactive gallery for their mobile website. It is compatible with most mobile devices and platforms such as iOS, Android, BlackBerry and it is also compatible with all mostly popular JavaScript libraries and frameworks.

 

photoswipe plugin for responsive web design

 

2. Flare – a responsive mobile-friendly lightbox jQuery plugin.

 

As developers write on their site this plugin, though you have to remember that it’s not free, is a perfect solution for desktops, laptops as well as for mobiles deeevics, with the support for Youtube, Vimeo and self hosted video files. IT has been also optimized for iDevices and many more.

 

Here are features:

  •  responsive lightbox plugin
  •  mobile and tablet optimize
  •  2 fullscreen gallery types
  •  touch enabled
  •  keyboard / mouse navigation
  •  fit / fill image scaling
  •  easy setup and full documentation

flare plugin responsive design

 

3. Frame it

 

This plugin ($8) enables you to frame every picture you want in a a simple way. Furthermore it also makes it possible to animate those pictures. You may create any number of frames or you can use presets included in the package.

 

Some of the features:

  •  responsive and mobile
  •  support for all major browsers
  •  fully customizable frame shapes
  •  fully configurable animation
  •  CSS3 double border effect
  •  CSS3 Real Shadow Effect
  •  jQuery effects included
  •  full documentation

 

There are only some of the features for the rest visit the plugin’s website.

 jquery plugin for responsive design

4. uSquare

 

It is an interesting responsive grid made with squares that enables you to display your content in a unique way. You may display various content bye means of uSquare that may include: team members, products, designs, posts etc. It is compatible with all major browsers.

Main features:

  • Responsive
  • CSS greyscale
  • full cuztomization
  • scrollable content
  • jCarousel image slider included
  • fully flexible

 

Cost of this plug-in is around $5.

 plugin usquare jquery

 

5. Ken Burner Responsive Jquery Slider

 

It is a premium plugin for your website that combines Ken Burns Effect, Text Animations, state-of-the-art-Slider and Responsive rebuilding. You can customize it to your need with a little knowledge of HTML and CSS.

 

The Features:

  • Responsive Design
  • Image and Thumbs fully resizable
  • Optional Ken Burns effect
  • Unlimited Caption Layers
  • Unlimited Slides
  • Customizable Ken Burns Effect (StartEnd-Position and Zoom or Random)
  • iPhone/iPad & Android Swipe Touch enabled
  • jQuery Conflict free plugin
  • Customizable 100% via Plugin Parameters / CSS / HTML
  • Easy installation in your Website
  • Special Easing
  • Example Pages included
  • 2 Pictures are used for Hover-Effects, so you can build every effect you wish (blur, greyscale…) with your favourite image tool

plugin for responsive design

 

6. ResponsiveSlides.js

 

This slider plugin is free and is really lightweight. Only 1kb. It is a jQuery plugin that works with a wide range of browsers. Although it has only two different modes, which are automatic fade of images or a responsive image container with pagination its size makes it an interesting plugin.

 

Features:

  • Fully responsive
  • 1kb minified and gzipped
  • CSS3 transitions with JavaScript fallback
  • Simple markup using unordered list
  • Settings for transition and timeout durations
  • Multiple slideshows supported
  • Automatic and manual fade
  • Works in all major desktop and mobile browsers
  • Captions and other html-elements supported inside slides
  • Separate pagination and next/prev controls
  • Possibility to choose where the controls append to
  • Possibility to randomize the order of the slides
  • Possibility to use custom markup for pagination
  • Can be paused while hovering slideshow and/or controls
  • Images can be wrapped inside links
  • Optional ‘before’ and ‘after’ callbacks

 plugin responsive slide jquery

 

7. Sequence

 

Jquery plugin that provides complete functionality fr a website slider. Id does not force the user to set a main theme and the plug-in is free to download. It is responsive and it uses CSS3 transitions. Certainly the plug-in works on all major browsers. It features great number of various options and is open source so feel free to use download and use the plug-in.

 plugin for responsive design

 

8. iView

demo

 

This slider is an interesting option for more demanding users and developer because it features 35 transition effects. Moreover this plugin can slide images, HTML or video. It is responsive and has great amount of functions.

Some features:

  • Touch gestures navigation for iOS, Android and other touch devices.
  • Highly Flexible and Customizable.
  • Highly User Interface Design.
  • Custom per slide easing.
  • Multilanguage support.
  • 35 transition effects available.
  • Multiple transitions available, also can set a different transition per slide.
  • Multiple instances allowed in a single HTML page.
  • Custom per slide timeout.
  • Animated HTML captions with custom effects (fade, move top, move right…).
  • Slides uses only valid HTML5 markup (SEO optimized).
  • Works on iOS & Android devices.
  • Auto slideshow with optional pause on hover.
  • Easily resizable.
  • Animated preloader bar.
  • Keyboard support.

 iview responsive plugin slide

 

 

And here you have two nice sites where you can browse literally hundreds of jQuery plugins.

Jquer.in

 jquery plugin site

 

Jplugins

 resources site for jquery plugins