jQuery is an open source cross browser JavaScript library. The main aim of jQuery is to make working with HTML simpler. jQuery has the potential to outdo Flash and other applications when it comes to beautifying a website. It is today a well known fact that jQuery is more adept at creating and maintaining short animations and easier navigation through the web pages. Web developer find it easier to work with jQuery simply because it has more functionalities and is much more efficient than Flash. They can also build applications and plugins easily for jQuery.
CSS integration and Ajax implementation can be all done on jQuery and this is what makes it indispensible. Here in this article, I have posted some of the best jQuery plugins that will help you make your website more attractive and better working. As a blogger, I don’t need to tell you that a better looking and more interactive website always draws more visitors and thus more traffic. The jQuery plugins mentioned in this article are all free and they can be implemented very easily to your website.
Following are some more related articles that you may like to browse through:
- 27 jQuery slideshow and gallery plugins
- 17 Best jQuery and WordPress Tutorials
- 10 Useful AutoComplete Search Scripts
- 30 Handy jQuery Plugins for Drag And Drop
It’s our pleasure that we have a platform to share our collections with you. We promise you that we will try our best to deliver the best possible resources.
Don’t forget to subscribe to our RSS-feed ; follow us on Twitter and Like our Facebook Page — for recent updates.
I hope that you will make good use of these jQuery plugins mentioned here and please do post your comment as to how a particular plugin made enhancements to your website.
Circular Discography Template
Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on next or previous. When clicking on an album, we will open the album details view which contains a music player (jPlayer) and a playlist of some songs. There is also a description area that can be scrolled.
Animated Skills Diagrams
In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.
Parallax Slider
Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
YoxView
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.
Animated Content Menu
Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.
spritely
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
Sexy Page Curl
Taggify Clickable Image Region Shows Popup Tooltip
This is a great opportunity to enhance your content. Not only you’ll get money. We can provide you fulfill the expectations of your audience. We have great sharing tools to improve your community.
Sweet Thumbnail Gallery
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
Coda Style Popup Bubble Tooltips with jQuery
Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.
Animated Form Switching
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.
Easiest Tooltip and Image Preview Using jQuery
You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library.
Thumbnail Previewer
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.
Prototip 2 – Create Beautiful Tooltips with Ease
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.
Full Screen Gallery
In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys.
jQuery Keyz Plugin
The purpose of this plugin is to easily facilitate the end user to create and hook key presses for their own use. Usually you would need to know what key links with which keycode etc.
Overlay-like Effect
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.
Sweet Titles Transparent and Fading Tooltips
No. It’s not a knock-off from NICE Titles nor is it trying to improve on Dunstan’s revised attempt. And it most definitely isn’t ripped from one of those event-handler infested scripts from Dynamic Drive No. It’s none of those. Instead I had two goals for this script.
Image Wall
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. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.
Create Simple Jquery Right Click Cross browser Vertical Menu
Creating right click with the help of jquery is real easy and can be implemented very quickly. While trying for my one of the project , I made one and sharing it today.
Sliding Letters
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.
jqisotext
jqIsoText is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
Over Scroll
Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. OverScroll runs best on Safari 5+, Chrome 5+, and Firefox 3+ but should run just fine on most modern browsers.
Create a Content Rich Tooltip with JSON and jQuery
This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.
JSlick Menu
The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.
See this Video
[youtube width="580" height="315"]http://www.youtube.com/watch?v=1_q4TRunUq4[/youtube]
Replace Your Default Tooltip with Pretty (mb)Tooltip
Sipmply by placing a “title” atribute with your content as value; be careful on using quote or doublequote or tag opening for html! it’s thought as a simple description container .
3D Wall Gallery
Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.
Flickr-Style Photo Tagging Using jQuery
I packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.
Fade In and Out Tooltips for Prototype and Scriptaculous
CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.
Isotope
An exquisite jQuery plugin for magical layouts
TinyTips
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.
The Tooltip ( $4 )
The Tooltip is a handsome, modern gentleman that appears when it’s showtime.
TipTip
This plugin is yet another product from my development work on Build It With Me. I wanted a sweet & simple custom tooltip, but nothing I found seemed to be smart enough for what I needed. I needed a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does!
See This TipTip jQuery Plugin Video
[vimeo width="560" height="315"]http://vimeo.com/8508658[/vimeo]
Dynamic tooltip
jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal.
jQuery Ajax Upload
Using a little bit of jQuery we can upload images without the suck.
Fresh Tooltips
Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.
jQuery outside events
With jQuery outside events you can bind to an event that will be triggered only when a specific “originating” event occurs outside the element in question. For example, you can click outside, double-click outside, mouse-over outside, focus outside (and over ten more default “outside” events). Also, if an outside event hasn’t been provided by default, you can easily define your own.
Awesomeness
One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.
PicNet Table Filter
The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.
jGrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
Generic Popups (jQuery)
“Generic Popups” script lets you create different kinds of Popups; such as Tooltips, Message Boxes, Alerts, Prompts tc. with support for complex structures. The functionality of the plug-in is similar to that of jQuery, therefore, the learning curve is relatively easier.
Prototip Most Features Tooltips for Prototype
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. If you also use Scriptaculous you can even add some nice effects to them.
Shiny Tooltips
You can add tooltips to elements which appear when you mouseover them.
Magic Toolbox – Javascript and Flash Image Zoom Tools
Magic Toolbox is here to create tools that inspire and amaze.
Point 1.2 – Powerful image pointer.
Image pointer is the new evolution of photo tagging and it’s more powerful than photo tagger. This script uses the jQuery framework and works completely client side. So you can use it on static and dynamic webpages. The points could be linked to urls from the JSON hash. So if you want an image pointer for your images, use our iPointer.
How to Build the New Visual Annotations with CSS3
Our solution was not technically too complex. With Notable (as well as most of our projects) we’ve embraced the concept of graceful degradation: we take advantage of new CSS techniques that degrade cleanly to older browsers.
Get a Closer Look with AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.
Greyscale Hover Effect with CSS & jQuery
My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
jQuery Javascript Image Magnifier under GPL
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want.
Simple Transparent Tooltips with jQuery and CSS
CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks.
Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is magnificent, let alone the content!. Thanks For Your article about 50 jQuery Plugins for a Beautiful Website .
Nice Post………………
Nice website lists! all of them are cool! Thanks!
nice list. but I would add http://animatedpng.info/ here too.