10 jQuery Plugins to Create Flip Effects

In this post, find a complied list of jQuery plugin to integrate flip animations. These plugins provides flip effects to images, text, image gallery, clock and any DOM element.

1. flipLightBox

flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes.

FlipClock.js is a jQuery plugin with CSS3 animations to add counter, timer and clock with smooth flip effect.

flipGallery is a free jQuery powered photo gallery with sleek flipping transitions between thumbnails and lightbox enlargements. Other features include dynamic image streaming, auto pagination, auto cropping and transparent image overlay. It only takes a few minutes to set-up and the layout, speed, co-ordination and text can easily be modified in the settings.

4. Flip

Flip is jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11.  It still works with other browsers but the "slide" effect will be selected forecely.

5. flipCountDown

flipCountDown is a jQuery clock / timer / countdown plugin in retro flip-count down style.

6. Flip Quote

jQuery Flip Quote creates a pull-quote from a text quote found in the document and flips to reveal the quote once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

7. Wodry

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

justFlipIt is a lightweight jQuery plugin that allows you to implement CSS3 based flip animations on any DOM elements.

Cover3D is a super tiny (~2kb unminified) jQuery plugin used to create 3D cover flip animations using CSS3 rotate and translate transforms.

10. jQuery Flipper

jQuery flipper is jQuery & jQuery UI based plugin which allows you to rotate an Html element using CSS3 3D transforms.

10 jQuery Plugins with Google Material Design

Google’s material design is becoming popular due to better user experience, eye catching animations and its simplicity. In this post, find a complied list of jQuery plugins which have created material design effects. These plugins provides material design effects to progress bar, buttons, charts, timer, stopwatch, notifications and input controls.

1.     Material PreLoader

Material Preloader is a jQuery plugin that recreates the Material Design preloader (as seen on Google inbox).

2.     Material Design Stopwatch, Alarm and Timer

A small JavaScript application that conforms to Google’s material design guidelines. It consists of three parts – an alarm clock, a stopwatch and a timer. The application is responsive and has a bunch of subtle animations that react to user input.

SnackbarJS is a lightweight and jQuery powered plugin to create Material Design snackbars and toasts with ease. It made to work in Bootstrap style, just like the Bootstrap tooltips work.

4.     MProgress.js

MProgress.js is a Google Material Design Progress linear bar by using CSS3 and pure JavaScript.

A jQuery plugin used to create a Google Material Design inspired loading spinner using SVG and CSS3 transforms.

6.     Material Design Styled Pie Menu

A Google Material Design styled pie menu for navigation in webpage. It opens a sub-menu when clicked or tapped, built with jQuery and CSS3 transitions & transforms.

7.     legitRipple.js

A lightweight, CSS based jQuery plugin for material-design ripple effects.

8.     ToggleSwitch

Simple ToggleSwitch Jquery plugin with Material design style.

9.     Material Charts

Material Charts is a lightweight jQuery plugin helps you create nice, clean, Material Design styled charts / diagrams with plain html, CSS and JavaScript.

10.                         Google Material hamburger button

Google material designed hamburger button created using jQuery and CSS 3.

8 jQuery Plugins to Integrate Instagram Photos

Instagram is the most popular online photo-sharing and social networking service which allows users to take a picture, apply a digital filter to it, and share it on a variety of social networking services. Instagram is fast, beautiful and fun way to share your photos with friends and family.

So In this post find list of jQuery Instagram plugins that will allow you to pull in your own Instagram pictures, tag specific photos.

1.     Instafetch

instafetch fetches media from Instagram based on (and only on) the user and/or tag, relying on the Instagram API.

If you use the Instagram API to make a call, you will only get 33 results back, no matter what you specify in the count paramter. Instafetch will help you fetch more media than the limit imposes, in exchange for more API calls, which can count against your hourly limit.

2.     jQInstaPics

jQInstaPics is a simple jQuery plugin that enables you to display the latest pics from your Instagram feed on your website or blog.

3.     Instagram Infinite Scroll

Instagram Infinite Scroll is a single page Infinite Scroll app built using jQuery, and CSS.

4.     Instagram Lite
A simple, lightweight jQuery plugin used to display a user's Instagram photos.

5.     Spectragram

An easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site.

6.     pongstagram.js

Pongstagr.am is a jQuery plugin that lets you display your Instagram media to your website using Bootstrap Front-end styles and modal-plugin.

7.     InstaStream

Instastream is a simple jQuery plugin to stream pictures from Instagram.Before to go further be sure you have an Instagram account and an Instagram API Key.You can choose how many pictures you want by slide.

8.     InstaSlider
jQuery InstaSlider is a lightweight (just 2kb when minified!) jQuery image slider / carousel plugin that populates content from an Instagram hashtag or username.

Hope you find this list useful!!!!!

Show Password as you type using jQuery.rar

Show Password as you type using jQuery.rar
Showing password as and when user is typing is you see a lot these days on various smart phones app and mobile device specific websites. As it gives indication of what user is typing on small devices where keys can be mixed easily. So in this post, you will find the solution of how to implement the same feature using jQuery and without any jQuery plugin. So let’s start.


First, let’s see the html part. Define a span element just below your password input control or you may also have next to it. Place the span as per your design requirement and keep it hidden. And also define a checkbox with default state to checked.
Password: <input type="password" id="txtPassword" />
<span id="spnPassword" style='display:none;'></span>
<input type="checkbox" id="chkShow" checked />Show Password

jQuery Code

On jQuery side, attach a keyup event on the password input control. This keyup event first checks if show password checkbox is checked. If yes, then copy the password control value to span and display it. Otherwise hide the span element.
 $('#txtPassword').keyup(function () {
     var isChecked = $('#chkShow').prop('checked');
     if (isChecked) {
     else $('#spnPassword').hide();
Another thing we need to do is to show/hide the span element based on checkbox status. So attach a change event to checkbox and based on its checked status show/hide the span.
$('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
        } else {
So complete code is,
$(document).ready(function () {
    $('#txtPassword').keyup(function () {
        var isChecked = $('#chkShow').prop('checked');
        if (isChecked) {
        else $('#spnPassword').hide();
    $('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
        } else {
See Complete Code

12 Responsive jQuery Lightbox Plugins

Lightbox is great way to display large images on modal window and if you wish to have a lightbox which works not only on desktop but also on tablets and smart phones. And for that you need a responsive lightbox plugin.  So in this post, find a compiled list of 12 responsive jQuery lightbox plugins which supports images, YouTube videos, iframes and any kind of content.  Enjoy.

1.     LightCase

Lightcase is a flexible, responsive and extendable lightbox plugin based on the jQuery Framework, uses CSS3 for all its transitions. It works fine in all common browsers like Internet Explorer 7+, Firefox, Opera, Webkit and more.

2.     Chocolate

Chocolate is a responsive jQuery lightbox plugin that is powerful and easy to use. Chocolat.js enables you to display one or several images staying on the same page.

3.     jQuery.TosRUs

jQuery.TosRUs plugin is a great lightbox alternative for scrolling/swiping through any kind of content. It works quite well on a desktop, tablet or smart phone, inside a HTML element or as a lightbox popup. It's responsive by default.

4.     Simple Lightbox

Simple Lightbox is a touch-friendly image lightbox for mobile and desktop with jQuery. It’s responsive, touch friendly and easy to install.

5.     Strip

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

6.     Rebox

jQuery Rebox is a small, lightweight, responsive lightbox that uses delegation. Instead of using a ridiculous amount of JavaScript to restrict image sizes within the window, Rebox uses css max-width. The design requires no images, although if you want to reskin it you can. This keeps the library clean, and simple.

Image Lightbox is an ascetic, minimalistic, extensible & configurable, responsive and touch-friendly, iOS, Android and Windows Phone compatible lightbox plugin. Silently preloads next image, uses CSS transform and transition, interacts with keyboard.

8.     SmoothBox

Smoothbox is a simple, lightweight, and responsive jQuery lightbox plugin. It uses CSS3 transitions for smoother effects.

9.     FeatherLight

Featherlight is a very lightweight jQuery lightbox. It's very, very lightweight. 400 lines of JavaScript, 100 of CSS, less than 6kB combined. It's smart, responsive, supports images, Ajax and iframes out of the box and you can adapt it to your needs.

10.                         flipLightBox

flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional style sheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images.

11.                         Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.  

12.                         SwipeBox

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet. It provides swipe gestures for mobile, keyboard Navigation for desktop, CSS transitions with jQuery fallback, retina support for UI icons and easy CSS customization.