- This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

jTip JQuery Plugin

- jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.This can be utilized for form Field Tips.

jqTransform

- A  jQuery styling plugin which allows you to skin form elements.

JQuery Geogoer VChecks Plugin

- Lovely Check Boxes.

Ajax Fancy Captcha

- Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

jQuery Date Picker

jQuery plugin: Password Validation

This plugin extends the jQuery validation plugin, providing two components:
* A function that rates passwords.
* A custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. The text displayed can be localized.

More Plugins would be added soon

Cute Tweeters by Mirjami Manninen for Smashing Magazine

Twitter Birds From Gopal Raju of ProductiveDreams.Com

Another Set of Twitter Birds From Gopal

Free Twitter Birds

Free Twitter Icons – Happy Birds

Tweetbird  Icon from Sneh Roy

Free Twitter Bird Icons By Kailoon

Free Twitter Bird of Biju Subhash

Tweeta Free Twitter Bird Icon Set

Free Twitter Icon

Twitter Bird Icons & Illustration

High Resolution Twitter Bird Icons

Lovely Twitter Icons

A Little Bird Told Me

8 Free Cute & Simple Twitter Bird Vector Graphics

Free to use Twitter icon illustration

Free Rockin’ Twitter Icons for Your Blog

Twitter Icons

Tweeties- A Free Twitter Icon Set

40 Cute Free Twitter Graphics – Badges, Icons & Buttons

Kweet- A Free Twitter Bird Icon from Cheth Studios

Usning the Timthumb thumbnail Generator

Timthumb is a thumbnail Generator script written in PHP and it requires the GD library. You can get the timthumb script from Darren Hoyt at Google Code . First of all lets thank Darren for this magical script.

How Stuff Works?

For a neat look, we would be displaying post thumbnails along with post summarieson your wordpress home page and other archive pages. Goto the DEMO PAGE and see how it looks on Wordpress’s default Kubrick Theme.Now lets see how this works.We have two methods for selecting the image used for generating the post thumbnail.

1. Specifying the Image from which the thumbnail should be generated(We have to do it for each post by using a Wordpress Custom Field)

2. By automatically using the first image in the post for generating the post thumbnail(thumbnail will be generated automatically from the first image in the post)

Our Plan

Here we will use a combination of the above two methods. If the post has a Custom Image field value then we will use that specified image for generating the thumbnail .If it doesn’t have any image url specified in the custom field, then we will use the first image in the post, and if the post doesn’t have any images and it doesn’t have an image URL in the custom field, then we wont use the post thumbnail.This is a very simple Code. So everyone would be able to figure out how it works. First of all we have to get the timthumb script on your server.Create a folder named thumbnails in your wp-content folder . Upload the timthumb.php script into this folder. Make a subfolder named cache within the wp-content/thumbnails folder and change the permissions of this cache folder to 777.

Before  we start lets get familiar with some Wordpress Template tags.

Template Tags

1.<?php the_content();  ?> – This template tag outputs the entire wordpress post.

2.<?php the_excerpt(); ?> – This template tag outputs the post summary.If you haven’t manually added  a post excerpt,then wordpress will automatically generate one for you.So this template tag can be used to display the post summary.

Ok lets do it.

We will start with the Wordpress home page. So edit your theme’s index.php file. You would probably see something similar to

<?php the_content();  ?>

. We will have to replace this with

<?php the_excerpt(); ?> .

Now we are half way through. Your wordpress home page will now be displaying post summaries instead of showing the entire post.Now we have to display the thumbnails alongside the post summary.For this you will have to add the thumbnail generation(+display) code just above

<?php the_excerpt(); ?>

Code For Thumbnail Generation + Display

  <?php  $custom_values = get_post_custom_values("thumb_source");
   if (isset($custom_values[0]))  $image_source= $custom_values[0];
  else
  {$id =$post->ID;
  $the_content =$wpdb->get_var("SELECT post_content FROM   $wpdb->posts WHERE ID = $id");
  $pattern = '!<img.*?src="(.*?)"!';
  preg_match_all($pattern, $the_content, $matches);
  $image_source = $matches['1'][0];
  }if (isset($image_source))
  {?>
  <a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="http://www.yourblog.com/wp-content/thumbnails/timthumb.php?src=<?php echo $image_source;?>&w=180&h=180&zc=1&q=85"  alt="<?php the_title();?>"></a>
  <?php }?>

Ok what does this Code do?

It tries to fetch the custom image field ,  thumb_source (you can use any custom field name.In this tutorial we will use thumb_source as our custom field name) . If you have added a custom field thumb_source with the image URL, then the code will use that particular  image for thumbnail generation.If it is unable to find the custom field, then it will scan the post to see if it has any images.If it has got any images, then it will use the first image in the post for generating the thumbnail.If the post doesn’t have any image and it doesn’t have a custom field image, then the script wont do anything.In the code you should replace http://www.yourblog.com with your wordpress blog’s URL. You can also alter the highlighted values in the code.

w=180 the width of the generated thumbnail

h=180 the height of the thumbnail

zc=1 this will crop the image.if you set it to 0, it will resize instead.

q=85 this determines the quality of the generated thumbnail. maximum value is 100

Now you should see the thumbnail image and the post summary on the Wordpress home page. The thumbnail image is not styled properly.This is our next task.

Styling the The Thumbnail Image

Now we have to edit our theme’s stylesheet file(style.css) and add the following styles there

.cute-post-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

You can surely alter the styles and make it even more beautiful and appealing .

Now we are finished with the wordpress home page.Now repeat the same process for the wordpress archive pages(tag,category search and other archives) by editing archives.php,search.php etc  in a similar manner.

Extra Notes

1.Timthumb can generate thumbnails of internal images only.So if you are using images hosted on some other sites,then timthumb wont be able to generate a thumbnail for you.

2.If you don’t want to use timthumb, you can make thumbnails by your own and then upload it somewhere and add the image URL as custom field.In this case you will have to modify the thumbnail code to

<?php  $custom_values = get_post_custom_values("thumb_source");
if (isset($custom_values[0]))  {$image_source= $custom_values[0];?>
<a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="<?php echo $image_source;?>"  alt="<?php the_title();?>"></a>
<?php }?>

Doing it in the Wordpress Way

As krembo99 has suggested in the comment,we can make use of the default wordpress functions to grab the thumbnails.To do this First of all goto your Wodpress Admin Panel > Settings > Media and set the thumbnail size to the size that you want.

Now use this Thumbnail generation Code instead

<?php
  $attachments = get_children( array('post_parent'  => get_the_ID(),
                'post_type'      => 'attachment',
                'numberposts'    => 1, // show all -1
                'post_status'    => 'inherit',
                'post_mime_type' => 'image',
                'order'          => 'ASC',
                'orderby'        => 'menu_order ASC'
                ) );

if($attachments)
{foreach ( $attachments as $attachment_id => $attachment ) {?>
    <a href="<?php the_permalink();?>"><?php echo wp_get_attachment_image( $attachment_id,'thumbnail' );?></a>;
<?php }}?>

Now here the image is assigned a class attachment-thumbnail . So we will have to alter the styles to

.attachment-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

This method will use the thumbnail version of the first image in your post.

Doing in on the New Beta Version Of Wordpress using Wordpress Template Tags

Wordprerss 2.9, which is now in beta comes with some additional template tags.So the code becomes lighter

<?php if ( has_post_image() ) : ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_image('thumbnail'); ?></a>
<?php endif; ?>

If you require help with the following code, post a comment and I will respond to your inquiry .

1. Easy Slider – Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.

2. Coda-Slider -  Coda-Slider is a jQuery plugin which mimics the slider effect on the promo page for Panic’s Coda software

3. Gallerific – A jQuery plugin for rendering rich, fast-performing photo galleries

4. supersized – A fullscreen background/slideshow jQuery plugin

5. s3Slider – A wonderful slider plugin

6. AnythingSlider – AnythingSlider is an attempt at bringing together the functionality of all of other sliders

7. Galleria – Galleria is a JavaScript image gallery written in jQuery

8. Apple-like Slideshow Gallery – A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

9.Slider Gallery – A showcase slider like on the Apple website

10. jFlow – jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.

11. A Slick Slider using Coda slider – A styled Coda Slider

12. Moving Boxes – yet another jQuery Slider

13. slideViewer – slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML.

14. Accessible News Slider  – Accessible News Slider is a JavaScript plugin built for the jQuery library.

15. Featured Content Glider – This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, "glide in" slideshow.

16. wSlide – wSlide will allow you to turn any list into a kind of viewer, both for text and images

17. Featured Content Slider – A featured content slider using the jQuery UI library.

18. jQuery UI  Content Slider – An attractive and functional content slider using the jQuery UI slider widget.

19. jQuery Cycle – The jQuery Cycle Plugin is a lightweight slideshow plugin.

20. Pikachoose – Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

21. Start/Stop Slider – Yet another slider with start and stop controls.

22. CrossSlide – CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself

23. Spacegallery – Another Image Gallery

24. jQuery Image Scroller – An image scroller, making use of jQuery’s excellent animation features

25. jQuery Image Slideshow – A simple image slide show with a semi-transparent caption using jQuery

26. jQuery Smooth Div Scroll – Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right.

27. Gallery View – GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view.

1.Jquery Version Of Light Box – Jquery version of the Original Lightbox plugin by Lokesh Dhakar

2.Facebox – A jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

3.Sexy LightBox – A sexier and lite version of Light Box available in jQuery and Mootools Platforms

4.PiroBox – another lightbox with jQuery

5.Fancy Box – displays images, html content and multi-media in a Mac-style "lightbox"

6.Light window – Renders any type of Media onto a modal box

7.Shadow Box – Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats.

8.prettyPhoto – prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox.

9.Super Box – jQuery Superbox! is a script which allows you display windows with the lightbox effect.

10.CeeBox – An overlay popup script for easily embedding flash video, displaying images, or showing html (either external sites via iframe or content on your own site via AJAX).

11.Thick Box – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

12.Dialog jQuery plugin to display modal dialogs, messages , alerts forms etc.

13.ColorBox – another modal box which can display photos, photo groups, slideshow, ajax, inline, and iframed content

14.Boxy –  Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. I

15.NyroModal – Another Modal Box with animation callbacks and much more..

17.jqModal – jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.

18.SimpleModal – SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.

19. imgBox – imgBox is a jQuery plugin that implements a smooth zoom effect on images.