25 Helpful jQuery Tutorials and Plugins

, , Leave a comment

16 Flares Filament.io 16 Flares ×

jQuerry is all the rage these days among the web developers and designers even among the ones who intend to launch the websites. It happens to be the most coveted, power packed and cross-browser JavaScript library that is designed to make the HTML scripting simplified. A lightweight JavaScript Library, it is much supportive to the CSS 1-3 selectors. Endless amount of famous websites have been using it. jQuerry endows the users with powerful features, which is why it is liked to be used more frequently.

Here we present the 25 Helpful jQuery tutorials and plugins, which would appear to be much beneficial for the users.

1. Slide Effects with Hovering

This tutorial has been designed to help the users generate an image area along with various other images, which slide out by the time the user/visitor hover over them. The random sliding effect makes the images more beautiful since the images slide left or right, top or bottom or fade out. When any area is clicked, whole areas slide the images out.

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.

Slide Effects with Hovering

Demo: Slide Effects with Hovering

Tutorial: Slide Effects with Hovering

2. jQuery Smooth Tabs Plugin

This plugin is quite easy to use and lets the users show off their content with few effects to make the user experience attractive. To make it functioning, what is needed is just a single container for the required tabs and content, nicely done CSS and the pictures.

jQuery Smooth Tabs Plugin

Plugin: jQuery Smooth Tabs Plugin

3. Animated Portfolio Gallery

This tutorial is quite interesting since the jQuerry, which is used in it, generates the fabulous animated portfolio gallery laced with thumbnails scroller and an area to put the content for the item.

Animated Portfolio Gallery

Demo: Animated Portfolio Gallery

Tutorial: Animated Portfolio Gallery

4. Soxer

Soxer is a simple to use and small plugin to make the tenderly soften background picture transition effect.


Tutorial: Soxer

5. Pull out Content Panel

This tutorial helps you grab the technique of creating the content panel which slides out the stuff at a predefined scroll position. Pull out Content Panel is useful when a visitor scrolls down the article till the end of the page and there the related posts display as a sliding content panel.

Pull out Content Panel

Demo: Pull out Content Panel

Tutorial: Pull out Content Panel

6. Fancy OpenID Selector

It helps the users get the predefined OpenID endpoints in a tooltip dropdown along with the automatic replacement of the URL.

Fancy OpenID Selector

Plugin: Fancy OpenID Selector

7. Custom Animation Banner

This tutorial lets you know as to how you can create a custom animation banner using jQuerry.

Custom Animation Banner

Demo: Custom Animation Banner

Tutorial: Custom Animation Banner

8. jQuery Static Gmap Zoom

A simple jQuerry plaugin that generates the static Google map laced with the mouse-over zoom effect.

jQuery Static Gmap Zoom

Plugin: jQuery Static Gmap Zoom

9. Annotation Overlay Effect

This tutorial lets you generate the simple overlay effect to showcase the annotations or notes in web pages.

Annotation Overlay Effect

Demo: Annotation Overlay Effect

Tutorial: Annotation Overlay Effect

10. Embed Picasa Gallery

This plugin helps you integrate an interactive picture gallery that shows the pictures of your choice.

Embed Picasa Gallery

Tutorial: Embed Picasa Gallery

11. Slider Gallery

With the help of this tutorial, the user can create the creative picture gallery having a slider for the thumbnails.

Slider Gallery

Demo: Slider Gallery

Tutorial: Slider Gallery

12. Quovolver

It is called a simple extension for jQuery which generate the quotes and then showcases them on the webpage in a stylish manner.


Plugin: Quovolver

13. Compact News Previewer

This tutorial helps you generate a news previewer which puts the latest articles or news items in a compact manner.

Compact News Previewer

Demo: Compact News Previewer

Tutorial: Compact News Previewer

14. Style-my-tooltips

This plugin increases and glorifies the browser tooltips.


Demo: Style-my-tooltips

Tutorial: Style-my-tooltips

15. Polaroid Photobar Gallery

This tutorial helps the users design a picture gallery with a Polaroid look.

Polaroid Photobar Gallery

Demo: Polaroid Photobar Gallery

Tutorial: Polaroid Photobar Gallery

16. wdScrollTab

A tab panel, wdScrollTab possesses the skill to make scrolling for tabs which do not fit on the page.

wd Scroll Tab

Plugin: WD ScrollTab

17. Full Page Image Gallery

This tutorial lets you generate the alluring full page image gallery laced with scrollable thumbnails and a scrollable full screen preview.

Full Page Image Gallery

Demo: Full Page Image Gallery

Tutorial: Full Page Image Gallery

18. Tiny Carousel

This is called a jQuery-based carousel that slides the HTML based content in a horizontal or vertical position.

Tiny Carousel

Demo & Tutorial: Tiny Carousel

19. Collapsing Site Navigation

With the help of this tutorial, the user can create a collapsing menu containing vertical navigation bars plus a slide out area for placing the content.

Collapsing Site Navigation

Demo: Collapsing Site Navigation

Tutorial: Collapsing Site Navigation

20. Activity Indicator

It is a jQuery plugin which is completely helpful in creating a clear activity indicator by using SVG or VML.

Activity Indicator

Plugin: Activity Indicator

21. Making an Apple-style Splash Screen

By using this tutorial, the user can generate a simple jQuery plugin which showcases the fancy Apple-style splash screens.

Making an Apple-style Splash Screen

Demo: Making an Apple-style Splash Screen

Tutorial: Making an Apple-style Splash Screen

22. The Creation of a Stylish Coming Soon Page

This fantastic tutorial reveals how to generate a stylish coming soon page by using the programs like PHP, MySQL and jQuery.

The Creation of a Stylish Coming Soon Page

Demo: The Creation of a Stylish Coming Soon Page

Tutorial: The Creation of a Stylish Coming Soon Page

23. Making Better Select Elements with jQuery and CSS3

This tutorial makes you learn as to how you can make a script which replaces the ordinary select element with an attractive looking-power pack version with the entire functionalities intact.

Making Better Select Elements with jQuery and CSS3

Demo: Making Better Select Elements with jQuery and CSS3

Tutorial: Making Better Select Elements with jQuery and CSS3

24. Quick Feedback Form w/ PHP and jQuery

By using this tutorial, the users can learn the techniques of creating the suave style Feedback form that spells magic with the viewers in a way, they automatically lands on response portion.

Quick Feedback Form w PHP and jQuery

Demo: Quick Feedback Form w/ PHP and jQuery

Tutorial: Quick Feedback Form w/ PHP and jQuery

25. Moleskine Notebook with jQuery Booklet

This extraordinary plugin makes the users learn the techniques of using and customizing jQuery Booklet Plugin to generate a virtual moleskine notebook with latest posts from the blog.

Moleskine Notebook with jQuery Booklet

Plugin: Moleskine Notebook with jQuery Booklet


Leave a Reply

(*) Required, Your email will not be published