25 Fresh jQuery Tutorials and Plugins

AD

jQuery is the most famous, powerful and cross-browser JavaScript library which is designer to simplify the HTML scripting.

It is lightweight JavaScript Library which supports CSS 1-3 selectors and is used by thousands of popular websites.

Looking at the power which jQuery provides to its user, today we bring 25 fresh jQuery tutorials and plugins for you. Enjoy this handy collection.

You might also like to view :  Superb jQuery CSS Image Effects and Tooltips Tutorials or Top 15 Jquery CSS Animated Navigation Tutorials

1. Hover Slide Effect

Hover Slide Effect

DemoTutorial

This jQuery tutorial will demonstrate how to create an image area with several images that slides out when you hover over them, showing other images. Random sliding effect add to its beauty, by random sliding effect I means the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

2. jQuery Smooth Tabs Plugin

jQuery Smooth Tabs Plugin

Plugin Details

jQuery Smooth Tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. All you need is a single container for your desired tabs and content, some nice CSS and images.

3. Animated Portfolio Gallery

Animated Portfolio Gallery

DemoTutorial

In this tutorial jQuery is used to create awesome animated portfolio gallery with scroller for thumbnails and a content area where we will display details about the portfolio item. Images will appear as an overlay when we click to enlarge them. The heading will be animated from the top, fade out the previous image and slide the descriptions from the slides.

4. Soxer

soxer

Tutorial

This is a very simple and small plugin for soft background image transition effect.

5. Pull Out Content Panel

Pull Out Content Panel

DemoTutorial

In this tutorial you will learn to create a content panel that slides out at a predefined scroll position. For Example, if you want related posts to be displayed as a sliding content panel when your visitor scroll down to the end of the article, you can use this Pull Out Content Panel. It will reveal a teaser with related content and it can be expanded to full page size to show more. Item container will be adapted depending on how many items can fit to the user’s screen.

6. Fancy OpenID Selector

Fancy OpenID Selector

Plugin Details

Provides predefined OpenID endpoints in a tooltip dropdown, with automatic URL replacement.

7. Custom Animation Banner

Custom Animation Banner

DemoTutorial

In this tutorial you will learn to create a custom animation banner with jQuery, having different elements in a banner that will animate step-wise in a custom way.

8. jQuery Static Gmap Zoom

jQuery Static Gmap Zoom

Plugin Details

jQuery Static Gmap Zoom is a simple jQuery plugin. It creates a static Google map with a mouse-over zoom effect, as a light-weight alternative to a normal dynamic Google map.

9. Annotation Overlay Effect

Annotation Overlay Effect

DemoTutorial

In this simple tutorial you will create a simple overlay effect to display annotations or notes in web pages.

10. Embed Picasa Gallery

Embed Picasa Gallery

Tutorial

If you keep your images on PicasaWeb, this plugin lets you integrate an interactive gallery showing images of your choice.

11. Slider Gallery

Slider Gallery

DemoTutorial

This tutorial will explain how to create a creative gallery with a slider for the thumbnails. Once album is chosen the thumbnails area will expands, thumbnails will scroll to the end and move back to the first image.

12. Quovolver

quovolver

Plugin Details

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

13. Compact News Previewer

Compact News Previewer

DemoTutorial

In this tutorial you will learn to create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show list of articles on the left side and the preview of the article with a longer description on the right.

14. Style-my-tooltips

Style-my-tooltips

DemoTutorial

A very small plugin to enhance and glorify the browser tooltips. It adds just few options and styling via CSS, otherwise it works just like browser’ native tooltips.

15. Polaroid Photobar Gallery

Polaroid Photobar Gallery

DemoTutorial

In this tutorial you will learn to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover.

16. wdScrollTab Scroll Tab

wdScrollTab Scroll Tab

Plugin Details

wdScrollTab is a tab panel which has ability to scroll for tabs that do not fit on the page. It supports iframe, ajax call and dynamically loaded content.

17. Full Page Image Gallery

Full Page Image Gallery

DemoTutorial

In this tutorial you will create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview using jQuery and CSS3 Webkit properties.

18. Tiny Carousel

Tiny Carousel

Demo & Tutorial

Tiny Carousel is a lightweight jQuery-based carousel for sliding HTML based content horizontally or vertically. It also supports navigation by button, also number of blocks to move and the starting point of carousel can be set.

19. Collapsing Site Navigation

Collapsing Site Navigation

DemoTutorial

This tutorial will demonstrate you how to create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a sub-menu slides up from the bottom. Clicking on one of the sub-menu items will make the whole menu collapse like a card deck and the respective content area will slide out.

20. Activity Indicator

Activity Indicator

Plugin Details

Activity Indicator is a jQuery plugin that generates a clear activity indicator using SVG or VML. No additional images or external CSS is required in order to use this plugin.

21. Making an Apple-style Splash Screen

Making an Apple-style Splash Screen

DemoTutorial

In this tutorial you will be creating a simple jQuery plugin that will display fancy Apple-style splash screens.

22. Creating a Stylish Coming Soon Page

Creating a Stylish Coming Soon Page with jQuery

DemoTutorial

This tutorial will show how to create a stylish coming soon page using PHP, MySQL and jQuery. It will enable you to collect visitor’s emails and store them in a simple database table, on which you can send launching updates about your website.

23. Making Better Select Elements with jQuery and CSS3

Making Better Select Elements

DemoTutorial

In this tutorial you will learn how to build a script that will replace an ordinary select element with a better looking, markup powered version, while keeping all the functionalities intact.

24. Quick Feedback Form w/ PHP and jQuery

Quick Feedback Form

DemoTutorial

This tutorial will demonstrate how to create elegant Feedback form to get instant visitor’s response. It uses jQuery, PHP and the PHPMailer class.

25. Moleskine Notebook with jQuery Booklet

Moleskine Notebook

Plugin Details

This tutorial will explain how to use and customize jQuery Booklet Plugin to create a virtual moleskine notebook with latest posts from the blog.

Advertisement

Related Stuff!

Published on: December 29, 2010,

This post is in: Resources, Tutorials

Author

Taimur Asghar

Taimur Asghar is 19 year old blogger doing ACCA and blogging is his hobby. His interest is writing about designing, web applications, inspirations and photoshop works. He is co-founder of AddictiveFonts. You can also follow him on Twitter.
All Articles by

Leave a Response