Asim Shahzad Posted on 06. Feb, 2012 | Comment in!
I hope that jQuery Plugins & Tutorials will help you a large number and you would make your time extra easy.
Useful jQuery Plugins
This is the first version of my first jQuery plugin, so there might be some bugs. So please provide some feedback (I already know that multiple maps on the same page can interfere with each others marker click events,
Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states, in less than 10KB.
Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.
The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers.
A highly customizable gallery/showcase plugin for jQuery.
Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).
ContextMenu is a lightweight jQuery plugin that lets you selectively override the browser’s right-click menu with a custom one of your own.
This tutorial has been updated to use the latest AppLaud and jQuery Google Map Plugin Version 3.
Since I have been getting into jQuery a lot lately, what with reading the books and playing around with code, I felt I should try a more complicated type of plug-in. As such, I have created this jQuery demo plug-in which creates sliding-image puzzles based on containers that have images. Running the demo page we get this output:
markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.
Isotope: An exquisite jQuery plugin for magical layouts
With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element.
A jQuery plugin for embedding Flash movies.
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites.
A simple and practical navigation or featured image jQuery plugin.
It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.
Ideal Forms is a small framework to build powerful and beautiful online forms.
This is a jQuery widget for the brand new social network -Google Buzz- that you can embed anywhere on your webpage to integrate your Buzz stream into your page.
Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.
Kinda different image zooming script for those who want something fresh. Features: Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them.
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
Useful jQuery Tutorials
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
There are many times I want to leverage jQuery’s strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.
Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture.
Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps.
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.
Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure.
Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.
A php contact form that leverages the power of HTML5 , Ajax, and Google Maps.
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
If you enjoyed reading, consider sharing it on one of these social bookmarking sites.