Best jQuery Responsive Plugins & Tutorials with Demo

    Fresco : A beautiful responsive jQuery lightbox

    Fresco : A beautiful responsive jQuery lightbox

    Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.In fact, Fresco in the first truly responsive lightbox. Give the demonstrations a try to see what that means, make sure to adjust your screen size (or rotate your device).

    To make things even more awesome Fresco comes with fullscreen zoom, retina-ready skins, Youtube and Vimeo integration for HTML5 video and a powerful Javascript API.

    Freetile.js : jQuery dynamic and responsive layout plugin

    Freetile.js : jQuery layout plugin

    Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

    Full Screen Responsive jQuery Image and Content Slider:RSlider

    Full Screen Responsive jQuery Image and Content Slider:RSlider

    Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

    uSquare – Universal responsive grid html5/jquery

    uSquare - Universal responsive grid html5/jquery

    uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

    While we developed uSquare responsive grid plugin we carefully thought about its responsive layout. We wanted to make sure that all elements are visible and accessible with all resolutions for responsive layout.

    Ideal Forms : Responsive Forms with Html5 & jQuery

    Ideal Forms : Responsive Forms with Html5 & jQuery

    The ultimate framework for building and validating responsive HTML5 forms.

    Features:

    • Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
    • Keyboard support.
    • Every input type can be customized including select, radio, checkbox and file.
    • Custom datepicker using jQuery UI (with fallback)
    • “On the spot” validation.
    • Localization
    • HTML5 placeholder for every browser.

    Responsive Tables with CSS & jQuery

    Responsive Tables with CSS & jQuery

    A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.
    The JS will help us create some new elements on small devices, so we don’t have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

    How to Create a Responsive Navigation in CSS3 & jQuery

    How to Create a Responsive Navigation in CSS3 & jQuery

    In this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

    jQuery Animated Responsive Image Grid

    jQuery Animated Responsive Image Grid

    A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.

    This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

    ThumbFx : Responsive jQuery Thumbnail Effects

    ThumbFx : Responsive jQuery Thumbnail Effects

    Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops

    Features:

    • CREATE – Slideshows, lightboxes, overlays, tooltips, tabs, galleries, showcase and many many more..
    • SIMPLICITY – No complicated HTML structure. Use it wherever you want, however you want. Works out of the box. No need to add confusing JavaScript tags, just add the files to your pages and you can control every settings from the HTML tag.
    • RESPONSIVE – All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.
    • CROSS -BROWSER SUPPORT – Works great with all modern browsers like Firefox, Chrome, Safari, Opera and Internet Explorer 8 and above.

    Responsive Slider jQuery Plugin : iView Slider

    Responsive Slider jQuery Plugin : iView Slider

    iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

    This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

    This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.