20 Amazing jQuery Plugins and Tutorials for Your Website
The advanced features used to develop very simple yet impressive websites are common in today’s trend of web development. JQuery is one of the most popular JavaScript frameworks that can take web applications to a more advance level. The advantage it has over flash allows its users to develop CSS-Like syntax with animations similar to flash, all while developing in a very small size.
Vector N Pixel would like to present to you our picks of 20 very useful jQuery plugins, techniques and tutorials that will give you the advantage while developing your next website
1.Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
2.Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.
3.Moving Boxes Carousel with jQuery
This jQuery slider uses minimal source code with buttons to change panels and zoom in and out features.
4.Sliding Boxes and Captions with jQuery
These sliding boxes use the idea of using a div tag that acts as a window. In this window there are two other items which you choose that peeks through.
5.Filterable Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
6.Create a fancy Apple.com-style search suggestion
“This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”
7.jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.
8.Create a Add To Basket With jQuery and PHP
This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.
The main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.
9.CSS and jQuery Keyboard
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.
10.Create a Digg-Style post
We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.
11.jQuery based Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
12.Animated Image Filling Using jQuery
13.Drop Down Menu with jQuery & CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.
14.Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.
15.Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.
16.Create a Auto-Playing Featured Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.
17.Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.
18.Fancy Box
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.
19.Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.
20.Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Related posts:
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?
This post makes a lot of sense !
Now I’m doing on the Internet site selling headphones. Just open to see your post. It was really good for bringing to decorate my site for more complete.
That it was wonderful to learn using your posting. I just loved the couple of minutes that I used looking at it and wished to leave a comment to express that….Best wishes
Not many of them are good with writing skill and quality, but yours is an exception. I would like to read more of your writings on this subject.