25 Fresh jQuery Tutorials and Plugins


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


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


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




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

5. Pull Out Content Panel

Pull Out Content Panel


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


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


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


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


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


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


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



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


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


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


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


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


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


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


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.

Further Related Readings

  1. Your Name January 4, 2011 at 4:58 am

    Wow,Fantastic article,it’s so helpful to me,and your blog is very good,I’ve learned a lot from your blog here,Keep on going,my friend,I will keep an eye on it,One more thing,thanks for your post!

  2. Hermitbiker January 6, 2011 at 9:43 pm

    …. thanks Ayaz for these great jQuery tutorials !!

  3. t3k-design August 22, 2011 at 1:16 am

    Nice ! 😀

  4. atif January 17, 2012 at 12:07 pm

    All tutorials and plugins are great.

    1. Tayyab January 17, 2012 at 12:55 pm

      That’s very kind of you Atif! thanks

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved