How it's done

The type of field cannot be changed with Javascript from type="text" to type="password" so there are actually two fields for the password: a regular password field, and a second plain text field with the default "Password" value.

When the page is loaded the CSS makes the plain text field hidden. Then the jQuery / js makes the password field hidden and the plain text field visible. It's best to do it this way so if Javascript is not enabled (or there's a Javascript error which causes the rest of the script to stop running) then the user still has a regular password field with obscured text.

When the user clicks the plain text field, the jQuery / JS code makes the plain text field hidden, the password field visible and puts focus on the password field. On blur, if the password field contains an empty value the plain text field is restored as the visible one to show the default value.

Demo

Download (Both jQuery type and js type)

Ref: http://iaian7.com/webcode/Mediabox

Demo:open Yahoo Movies »

Download link: MediaBox Download link

I have created this package file for ready  to access. This package contains following list of files

• index.php
• css/mediabox.css
• js/mediabox.js
• js/swfobject.js
• js/mootools.js

Installation:

• extract the zip file in to system.
• upload mediabox folder into your server.
• access the mediabox  folder from the browser.

Using the MooTools 1.11 JavaScript library, Media box lets you open flash, video, and html content in a floating “lightbox” style window.

Mediabox will read Flickr, Google, MetaCafe, MySpace, Revver, YouTube, Veoh, Viddler, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.

Flash animation, flash video, QuickTime, windows media, inline content and external html content is all automatically recognised as well. Every link listed below is shown with the code used to make it.