The use of JavaScript can be listed like this

1. Checking and correcting the form data in the user side
2. Dynamically change the web page without reload it.
3. Create applications like calculator, simple applications and games.
4. Add effects to a web page which will attract more visitors

These are the important use of JavaScript. Some of them are very important, some of them not that much. Here I am showcasing some important JavaScript tools which commonly using in website.

JavaScript form validation

The most important and common functionality of a JavaScript is form validation. Most of the people using different JavaScript libraries such as Jquery, Moo tools, etc etc. As I am a fan of Jquery, I personally use bassistance JavaScript validation. It is simple to use and giving lot of options

Showcase image / video gallery

There are a lot of JavaScript libraries are available for showcasing images and videos even web pages. Here is the very popular JavaScript which used to overlay images / video / web page.

Lighbox

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Thickbox

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.

Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

shadow box

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

Highslide

Highslide JS is an open source image, media and gallery viewer written in JavaScript.

jcarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

SWFobject

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Miscellaneous scripts

• Drop down menus
• Tab styles
• Pushup JavaScript

For integrating all these scripts, person requires only knowledge of basic html and JavaScript. If you are using some other tools please share with me through the comment form.

First of all we need to insert the scripts necessary for creating the Thickbox. As I said earlier, WordPress is using jQuery and Thickbox already in its backend. So we just need to call the jquery and thickbox.

All these 3 lines of code should insert just before the < ? php wp_head( ) ; ? > function

These codes will include necessary files for your Thickbox. So Thickbox is ready for its functioning. Make sure that you have included < ? php wp_head ( ) ; ? > and < ? php wp_footer( ); ? > in your header and footer files respectively.

Now we can test it by uploading the image from backend by creating a post. Please note that after the image got uploaded, we need to link the thumbnail image to the original image. And we need to include the class for the anchor tag like this. class=”thickbox”.

Just save the post and see it in your blog.

[update: Somebody asked me how we can enable the Next and previous button on the thickbox. For getting that functionality we need to add rel="thickbox-demo" or rel="something" next to the thickbox class. So it will look like this

]

Hope you have like it. Follow me on twitter or subscribe my feed for latest updates.