25 Fresh and New jQuery Plugins and Tutorials

July 17, 2009 - 42 Comments
Ajax,Javascript,Tutorial,Web Design

Join 38,000 of our readers, by following us via our RSS Feed, on Twitter, on Facebook or on Digg

With jQuery becoming ever more popular, the volume and quality of plugins and tutorials that developers are releasing and writing are increasing rapidly. If you are looking for the latest in jQuery this is the post for you, all the plugins and tutorials in this post are new and fresh, they have only recently been published (within the last six weeks).

Fresh jQuery Plugins

vTip

Download Plugin »
View Demo »
vTip is designed to quickly provide lightweight (706b js, 272b CSS, 270b image) tooltips, using jQuery any element with a class of "vtip" will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

QuickFlip 2

Download Plugin »
View Demo »
QuickFlip 2 is a major reworking of the original Quick Flip plugin, it is a plugin that flips any piece of HTML markup over like a card. The new version is faster and easier to use – simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

Juitter

Download Plugin »
View Demo »
Juitter is a lightweight, fast & customizable jQuery Plugin that allows you to place a live feed of Twitter on your website. You can use Juitter to display tweets from a specific user or specific words, you can restrict results by language, and it even supports multiple users and keywords.

jPlayer

Download Plugin »
View Demo »
jPlayer is a jQuery plugin that plays and control audio files in your webpage, you can also create and style an audio player using just HTML and CSS and it streams faster using HTML5 and alternative ogg format support.

MopBox

Download Plugin »
View Demo »
MopBox is draggable lightbox that supports divs (HTML and CSS), images , flash, video, etc. A slider is shown automatically if it has more than one child, a slider navigation is shown and it will automatically resize.

MopSlider

Download Plugin »
View Demo »
The very cool looking MopSlider plugin is feature content slider that supports images, flash, html…almost anything.

jLayout

Download Plugin »
View Demo »
The jLayout jQuery plugin provides three layout algorithms for laying out HTML elements in web pages. The first is border, which lays out components in five different regions. The second algorithm is grid, which lays out components in a user defined grid. The third algorithm is flexGrid, which lays out components in a grid with flexible column and row sizes. The plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.

PassRoids

Download Plugin »
View Demo »
The PassRoids (love the name) jQuery plugin was designed to allow simple integration of password strength measurement and verification and display it in a simple method to the end user. Installation requires minimal js and css code and can be setup in a matter of minutes.

AD Gallery

Download Plugin »
View Demo »
AD gallery is similiar in functionality to Thickbox and Lightbox, but much better. It is a smooth and feature rich image gallery plugin, its two main features are the various transition effects and the auto scaling of images.

ColorBox

Download Plugin »
View Demo »
ColorBox is a light-weight (9kb), easily customizable lightbox plugin for jQuery 1.3. It supports photos, photo groups, slideshow, ajax, inline, and iframed content.

jSlickmenu

Download Plugin »
View Demo »
Its these amazing effects like these that will end up making Flash obsolete, all developed with jQuery and HTML5. The only downside to this plugin is that it can only only work on Safari, Google Chrome and Firefox 3.5 (only), as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. I suppose this plugin is glimpse into the near future of web development.

Interactive, Filterable Portfolio

Download Plugin »
View Demo »

Visualize

Download Plugin »
View Demo »
Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. With the development of the Visualize plugin you can now have a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Fresh jQuery Tutorials

Creating a Keyboard with CSS and jQuery

View Tutorial »
View Demo »
In this tutorial you will create an amazing 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.

Create Featured Content Slider

View Tutorial »
View Demo »
Here you will learn how to create an intuitive auto-playing content slider.

Auto Load and Refresh Div every 10 Seconds

View Tutorial »
With five simple lines of code, in this small tutorial, you will learn how to auto load and refresh a div every 10 seconds. This is similiar to the way that Facebook shows the most recent posts. This would be useful if you show your Twitter timeline on your blog.

Making a Content Slider

View Tutorial »
View Demo »
In this tutorial you’re going to be using the jQuery UI slider widget to create an attractive and functional content slider.

Better Password Inputs, iPhone Style

View Tutorial »
View Demo »

Create a stream of messages Monitter-like with PHP and jQuery

View Tutorial »
View Deno »
This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter.

Create fancy share box with CSS and jQuery

View Tutorial »
View Demo »
This tutorial will show you how to turn an unordered list (UL) into an fancy social bookmarking widget. You will learn how to style the box, how to add interactivity, and how to create a jQuery plugin that will turn any UL into a social bookmarking sharing box.

jQuery Infinite Carousel

View Tutorial »
View Demo »
This tutorial will walk through the fundamentals of the effect and how to recreate the scrolling carousel that works in the same way as the carousel that is on the Apple Mac ads page.

Create a Content Rich Tooltip with JSON and jQuery

View Tutorial »
View Demo »
This tutorial will show you how to build a cool and smooth tooltip that is powered by jQuery, with information pulled from a JSON array.

Making an Expanding Code Box

View Tutorial »
View Demo »
On blogs that like to share snippets of code, it is common to use the <pre> tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. While this is desirable behavior, it can be undesirable to have those un-wrapped lines break out of their containers awkwardly and overlap other content. This tutorial will show you how to create the solution.

Create a Slick and Accessible Slideshow

View Tutorial »
View Demo »
In this in-depth tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

Create a simple file or image management system with jQuery

View Tutorial »
View Demo »

RSS & Twitter

Grab the RSS Feed: Speckyboy RSS ».
Speckyboy on Twitter : Speckyboy on Twitter ».

You might also like…

50 Useful Tools and Generators for Easy CSS Developmentc »
20+ Resources and Tutorials for Creative Forms using CSS » »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials » »
22 CSS Button Styling Tutorials and Techniques » »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials » »
51 Amazing and Inspiring Blog Style Web Designs » »
6 Alternative Sources of Design Inspiration, Where do you get yours? » »
8 Amazing Free Online Creative Portfolio Community Sites – Share and Inspire » »
20 Inspirational Resources for Logos and Logotypes – Get Creative! » »

21 Comments › Leave yours

Rolando
17 Jul, 2009
GREAT ARTICLE! veeeeery useful! I almost bookmarked all of the items! Thanks!
Reply
Dainis Graveris
17 Jul, 2009
really beautiful and extremely useful article. Totally bookmarking this one :))
Reply
Heather
17 Jul, 2009
Jplayer looks like it might be useful; glad I stumbled across this on twitter. Thanks for sharing!
Reply
Abu Farhan
17 Jul, 2009
wow, All fresh jquery technique, Thanks for share this great article
Reply
Dzinepress
18 Jul, 2009
thats really helping for me and i really like as well, that’s why Digg your post too, thanks and i’m awaiting more like this.
Reply
Veera
18 Jul, 2009
Great list.
Reply
fandy
19 Jul, 2009
Great featured plug-in, those are useful plug-in
Reply
Jacob Gube
19 Jul, 2009
Thank you for including my “Create a Slick and Accessible Slideshow” – that one took a while to write and I’m glad people are getting uses out of it. If you have problems with the script or need help in any way, don’t hesitate to leave a note in the comments. Cheers!
Reply
pelfusion
19 Jul, 2009
very informative post…
Reply
Franz König
20 Jul, 2009
top!
Reply
fandy
20 Jul, 2009
@Jacob Gube, ya its useful, thanks… I was used
Reply
Oliver
21 Jul, 2009
Loads of great tutorials and plugins here. I need to start to learn jQuery so I can utilise these. Thanks for sharing.
Reply
Sam
28 Jul, 2009
Great collection of plugins and tutorials, I had been looking for a plugin like the auto load one, so this article has been incredibly helpful.
Reply
Jay August
28 Jul, 2009
Great, great post. It has one lil spelling error. On the post with this link: http://demo.marcofolio.net/slick_jquery_css3_menu/default.html it says “deno” instead of “demo”.
Peace!
Reply
Janko
29 Jul, 2009
Create fancy share box with CSS and jQuery is completely stolen tutorial, the original is here: http://www.jankoatwarpspeed.com/post/2009/07/13/Create-fancy-share-box-with-CSS-and-jQuery.aspx
Nice roundup, though :)
Reply
Kevin
2 Aug, 2009
Awesome round up of tuts, thanks!
Reply
SAT
23 Aug, 2009
Hi, and thanks for your nice list !
I’ve made one tutorial on “how to use Spacegalery jQuery plugin” if you are interested : http://slapandthink.com/blog/?p=107
Reply
Indialike
12 Feb, 2010
Very nice and useful tutorials for web designers,
Thanks for posting.
Reply
Manuel
11 May, 2010
Your list doesn’t include a tool that you might find very helpful…
It is called “Likno Web Tooltips Builder” for creating jQuery tooltips.
http://www.likno.com/jquery-tooltips/index.php
Reply
Aman
15 Aug, 2010
hi
cool list but some plugin is missing.i have some new jQuery plugin please see this:-
http:jquery13.blogspot.com
Thanks
Aman
Reply
Salah Elimam
29 Aug, 2010
Hey ..
its very cool and useful tutorials
thank you for posting
Reply